react-native-picedit v1.1.8

react-native-picedit

开始使用

$ npm install react-native-picedit --save

关联依赖

$ react-native link react-native-picedit 如果失败，请看手动集成。

也可以手动安配置

Android 手动集成步骤

1. 打开 RN 主工程找到文件:android/app/src/main/java/[...]/MainActivity.java

• 导入包名 import com.iwhalecloud.picedit.RNPiceditPackage; 到这个文件
• 添加 new RNPiceditPackage() 到 getPackages() 方法

2. 修改 android/settings.gradle 文件:

   include ':react-native-picedit'
   project(':react-native-picedit').projectDir = new File(rootProject.projectDir, 	'../node_modules/react-native-picedit/android')

3. 主工程引用 android/app/build.gradle: compile project(':react-native-picedit')

4. 模块组件下面有使用例子：demo.js

分别介绍了两种使用：

• 1、直接使用原生组件模块调用唤起原生界面
• 2、使用 UI 组件模块，前端页面配置使用

iOS

1. In XCode, in the project navigator, right click Libraries ➜ Add Files to [your project's name]
2. Go to node_modules ➜ react-native-picedit and add RNPicedit.xcodeproj
3. In XCode, in the project navigator, select your project. Add libRNPicedit.a to your project's Build Phases ➜ Link Binary With Libraries
4. Run your project (Cmd+R)<

使用

#项目里需要添加图片引用，正式打包才会添加到对应的应用目录
import test from "../../Images/top_logo.png";

import PhotoEditer from "react-native-picedit";

// TODO: What to do with the module?
<Button
          title={"点击图片编辑"}
          onPress={() => {
            const data = {};
            data.orign =
              "https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1561380079906&di=368d275b2ad6dfea75d35034b3c44aa8&imgtype=0&src=http%3A%2F%2Fb-ssl.duitang.com%2Fuploads%2Fitem%2F201603%2F06%2F20160306224210_TRBaQ.jpeg";
            data.maxSize = "1024";
            data.iconsNumber = 6; // [0-5]
            data.scale = false;
            data.icons = [
              "d",
              "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAGQAAABkCAYAAABw4pVUAAAAr0lEQVR4Xu3cQQ3AMBADQbsqf8oXCnlfZimM/HWTTBY0M9nQl8sEBIiACAgQAQEiIEAEBIiACAgQAQEiIEAEBIiACAgQAQEiIEAEBIiACAgQAQEiIEAEBIiACAgQAQEiIEAEBIiA6N/yxNb2rYUICBABERAgAgJEQIAICBABERAgAgJEQIAICBABERAgAgJEQIAICBABERAgAgJEQIAICBABERAgAgJEQIAICBAB0QFKqwfGDn71VAAAAABJRU5ErkJggg==",
              "https://hifond-oss.oss-cn-shanghai.aliyuncs.com/test.png"
            ];
            console.log(data);
            PhotoEditer.openPicEdit(data,(uri, data) => {
              console.log(uri);
            });
          }}
        />

<PhotoEditer
  style={{ width: "100%", height: 300 }}
   source={
          "https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1561380079906&di=368d275b2ad6dfea75d35034b3c44aa8&imgtype=0&src=http%3A%2F%2Fb-ssl.duitang.com%2Fuploads%2Fitem%2F201603%2F06%2F20160306224210_TRBaQ.jpeg"
            }
            //  android 离线包路径是目录拼接到drawable下面
            //  import testPng from "./top_logo.png";  打印是数字 2
            //  框架对应的目录:
            // ""
            //  如果是项目图片路径 请使用相对路径字符串形式 eg: "node_modules/rnlmphotoeditertest/top_logo.png"
            marks={[
              "d",
              // "node_modules/rnlmphotoeditertest/top_logo.png",
              PhotoEditer.toUrl("app/Images/top_logo.png"),
              "https://hifond-oss.oss-cn-shanghai.aliyuncs.com/result.png",
              "https://hifond-oss.oss-cn-shanghai.aliyuncs.com/test.png"
            ]}
  onComplete={msg => {
    alert(msg.base64);
    console.log(msg.uri);
    console.log(msg.base64);
  }}
  onCancel={msg => {
    alert(msg.result);
    console.log(msg.result);
  }}
  onError={msg => {
    alert(msg.result);
    console.log(msg.result);
  }}
/>;