# @baronha/react-native-photo-editor 中文文档 规范地址：https://npmcn.com/package/%40baronha/react-native-photo-editor/ 版本：1\.1\.6 npm 元数据更新时间：2023-01-02T15:24:54.910Z 中文译文更新时间：2026-11-07T17:12:15.594Z 软件包许可：MIT 本文由上游 README 翻译，可能存在偏差，请结合原文核对 API、命令与配置。版权与许可归原作者所有。 原始 npm 页面：https://www.npmjs.com/package/%40baronha/react-native-photo-editor 原文对照：https://npmcn.com/package/%40baronha/react-native-photo-editor/?lang=original 项目主页：https://github.com/baronha/react-native-photo-editor#readme 源码仓库：https://github.com/baronha/react-native-photo-editor ## 关键信息（来自 npm 元数据） - 包体积（解压后）：3.9 MB，211 个文件 - 模块格式：ESM + CJS - TypeScript 类型：包内自带 - 运行依赖：0 个 - peer 依赖：react \*，react-native \* - 首次发布：2021-08-02T16:45:05.341Z - 最新版本发布：2023-01-02T15:24:54.818Z - 近 30 天下载量：5698（2026-10-08 至 2026-11-06，npm 官方下载统计） - 已发布版本数：11（近 12 个月 0 个） ## 中文简介 iOS和Android使用本地模块的图像编辑器 ## 安装 ```sh npm install @baronha/react-native-photo-editor ``` 也可以使用：`pnpm add @baronha/react-native-photo-editor`、`yarn add @baronha/react-native-photo-editor`、`bun add @baronha/react-native-photo-editor` ## README # React 原生相片编辑器( RNPE) QQ 图像编辑器使用iOS和Android的本地模块. 继承两个图书馆, [ZLimage 编辑器](https://github.com/longitachi/ZLImageEditor) (iOS)和 [相片编辑器](https://github.com/burhanrashid52/PhotoEditor) (Android) (英语) ![](https://npmcn.com/package/%40baronha/react-native-photo-editor/resources/banner1.jpg) # 说明 **两个平台的区别很大 - 使用时要小心** 这个 lib 供个人使用, 所以如果您自定义您的风格或更改什么, 请将这个库叉出并检查原始库中的详细文档 : - [iOS系统](https://github.com/longitachi/ZLImageEditor) - [机器人](https://github.com/burhanrashid52/PhotoEditor) > 此套件开发期间. 我本来想把它搬走的 [更早的图书馆](https://github.com/baronha/react-native-multiple-image-picker) 说完了 如果支持这个图书馆的社区足够大,我不得不立即驳回这个想法. > 以前这个图书馆用过 [明间](https://github.com/muukii/Brightroom) 作为iOS的本土库. 如果你想使用亮相室,你可以检查出来 [这里](https://github.com/baronha/react-native-photo-editor/releases/tag/0.1.2)。 。 。 . ## 特性 QQ ### 两者 - Draw( 支持自定义行颜色) . - 添加/编辑 **文本** ,可选择更改其颜色. - 添加中 **图像/结晶** - 缩放并旋转视图 . ### iOS系统 - 在图像上应用过滤效果 [LUT 颜色](https://npmcn.com/package/%40baronha/react-native-photo-editor/#readme-custom-filtersios) (海关过滤器比Android简单) - 裁剪图像. ### 机器人 - 取用图像并带有选项来改变其Brush的颜色,大小,不透明,淡出和基本形状. - 在图像上应用过滤效果 [媒体影响](https://developer.android.com/reference/android/media/effect/EffectFactory)。但未来将改为LUT颜色. ## 视频Demo QQ | iOS系统 | 机器人 | | :-: | :-: | | | | ## 屏幕热 QQ ### iOS系统 ![](https://npmcn.com/package/%40baronha/react-native-photo-editor/resources/tools_ios.png) ![](https://npmcn.com/package/%40baronha/react-native-photo-editor/resources/filters_ios.png) ![](https://npmcn.com/package/%40baronha/react-native-photo-editor/resources/sticker_ios.png) ### 机器人 ![](https://npmcn.com/package/%40baronha/react-native-photo-editor/resources/tools_android.png) ![](https://npmcn.com/package/%40baronha/react-native-photo-editor/resources/filters_android.png) ![](https://npmcn.com/package/%40baronha/react-native-photo-editor/resources/sticker_android.png) ## 所需资源 - 斯威夫特 5.1+(Xcode12.4+) - iOS 12+ (英语) ## 安装 ```sh yarn add @baronha/react-native-photo-editor ``` ### iOS系统 斯威夫特舱 `@baronha/react-native-photo-editor` 取决于 `SDWebImage` 财务报告和审定财务报表 `SDWebImageWebPCoder`,不定义模块。 要选择生成模块地图的目标(在作为静态库构建时从斯威夫特导入这些地图是必要的),您可以设定 `use_modular_headers!` 或指定 `:modular_headers => true` 特定依赖关系: ``` pod 'SDWebImage', :modular_headers => true pod 'SDWebImageWebPCoder', :modular_headers => true ``` 然后运行 `cd ios/ && pod install` > 别忘了添加文件 [.宽度](https://stackoverflow.com/questions/52536380/why-linker-link-static-libraries-with-errors-ios) 在您的工程中( 并快速创建桥接头文件) . ## 使用量 ```js import PhotoEditor from "@baronha/react-native-photo-editor"; // ... const result = await PhotoEditor.open(Options); ``` ## 选项 | 财产 | 类型 | 默认值 | 平台 | 说明 | | :-: | :-: | :-: | :-: | :-- | | 路径 | 字符串 | 所需经费 | 两者 | 本地/ 远程图像路径 | | [标签](https://npmcn.com/package/%40baronha/react-native-photo-editor/#readme-stickers-) | 阵列 | \[ | 两者 | 包含标签图像的路径数组 | ## 过滤器QQ | iOS系统 | 机器人 | | :-: | :-: | | ![](https://npmcn.com/package/%40baronha/react-native-photo-editor/resources/filters_ios.png) | ![](https://npmcn.com/package/%40baronha/react-native-photo-editor/resources/filters_android.png) | ### 自定义过滤器( iOS) #### LUT (Hald 图像) [如何从 LUT 图像创建立方体数据](https://www.notion.so/CoreImage-How-to-create-cube-data-from-LUT-Image-for-CIColorCube-CIColorCubeWithColorSpace-9e554fd418e8463abb25d6232613ac1c) 我们可以从中性 LUT 图像下载 [创建器.js](https://sirserch.github.io/lut-creator-js/#)。 。 。 . #### [缩放图像](https://3dlutcreator.com/3d-lut-creator---materials-and-luts.html) > Hald是一个由3D LUT以颜色表形式呈现的图形化代表,它包含了3D LUT的所有颜色分级. 如果将Hald装入编辑软件并应用了色彩校正,您可以使用3D LUT Creator将您的Hald转换为3D LUT并应用到您编辑器中的相片或视频上. [这里有详细的文件](https://www.notion.so/Creating-your-own-filters-LUT-d1942f2f5bcc44d88481d0a0cc4aacb3#d7bba7a891234ea48f1854b5e555366a) **重要性** 你必须创造 `LUTs.bundle` 并添加所有 LUT 相片( 重命名您的 LUT 相片遵循此格式 : [LUT 64 FILTER 纳米](https://github.com/baronha/react-native-photo-editor/tree/master/resources/LUTs.bundle)改为: `LUTs.bundle`添加 `LUTs.bundle` 输入 `Copy Bundle Resources`。 。 。 . [见详情](https://github.com/baronha/react-native-photo-editor/tree/master/example/ios) ## 贴纸 ### 远程 您需要将一系列图像 urls 传递到粘贴参数 [选项](https://npmcn.com/package/%40baronha/react-native-photo-editor/#readme-options) [示例](https://github.com/baronha/react-native-photo-editor/blob/dev/example/src/assets/data/stickers.json)数字 : ``` [ "https://cdn-icons-png.flaticon.com/512/5272/5272912.png", "https://cdn-icons-png.flaticon.com/512/5272/5272913.png", "https://cdn-icons-png.flaticon.com/512/5272/5272916.png", ... ] ``` ### 当地 #### iOS系统 你必须创造 `Stickers.bundle` 并加入所有标签 `Stickers.bundle`添加 `Stickers.bundle` 输入 `Copy Bundle Resources`。 。 。 . [见详情](https://github.com/baronha/react-native-photo-editor/tree/master/example/ios) ![](https://npmcn.com/package/%40baronha/react-native-photo-editor/resources/sticker_tutorial_ios.png) #### 机器人 你必须创造 `Stickers` 内部文件夹 `assets` 文件夹。 然后拖入或复制所有标签 `Sticker` 文件夹. [见详情](https://github.com/baronha/react-native-photo-editor/tree/master/example/android/app/src/main/assets/Stickers) ![](https://npmcn.com/package/%40baronha/react-native-photo-editor/resources/sticker_tutorial_android.png) ## 待执行 - [ ] 鲁特颜色在和机器人. - [ ] 裁剪图像在和机器人. ## 业绩 我们正在努力提高性能。 如果你有更好的解决方案 请打开一个 [问题](https://github.com/baronha/react-native-photo-editor/issues) 或者说 [拉动请求](https://github.com/baronha/react-native-photo-editor/pulls)祝你们愉快! ## 捐款 见 [贡献指南](https://npmcn.com/package/%40baronha/react-native-photo-editor/CONTRIBUTING.md) 学习如何为储存库和发展工作流程作出贡献. ## 许可证 麻省理工学院 ## 常见问题 ### @baronha/react-native-photo-editor 是什么？ iOS和Android使用本地模块的图像编辑器 ### 如何安装 @baronha/react-native-photo-editor？ 在项目目录运行 npm install @baronha/react-native-photo-editor，或使用 pnpm add / yarn add / bun add。它还需要宿主项目提供 peer 依赖：react（\*）、react-native（\*）。npm 7 及以上与 pnpm 8 及以上默认会自动安装必需的 peer 依赖，Yarn 需要手动安装。 ### @baronha/react-native-photo-editor 支持 TypeScript 吗？ 支持。包内自带 TypeScript 类型声明（package\.json 声明了 types 入口），安装后即可获得类型提示，无需再安装 @types 包。 ### @baronha/react-native-photo-editor 支持 ESM 还是 CommonJS？ 同时提供 ES Module 与 CommonJS 入口，import 和 require\(\) 都可以使用，打包工具会自动选择合适的版本。 ### @baronha/react-native-photo-editor 可以商用吗？ @baronha/react-native-photo-editor 使用 MIT 许可。宽松许可：允许商业使用、修改和再分发，通常只需在分发时保留原版权与许可声明。以上为概括，不构成法律意见，请以许可原文为准。 ### @baronha/react-native-photo-editor 的下载量有多少？ 根据 npm 官方下载统计，@baronha/react-native-photo-editor 在 2026/10/08 – 2026/11/06 这 30 天内被下载 5,698 次，日均约 190 次。下载量会把 CI 构建、镜像同步和作为其他包依赖的安装一并计入，适合横向比较热度，不能直接等同于使用人数。 ### @baronha/react-native-photo-editor 还在维护吗？ 最新版本 1\.1\.6 发布于 2023/01/02（3 年前）；至今共发布 11 个版本，其中过去 12 个月发布了 0 个；首次发布于 2021/08/03。发布频率只是参考信号：功能稳定的工具可能很少需要更新，建议结合源码仓库的 issue 和提交记录判断。