rn-lm-photoediter-test v0.0.2

rn-lm-photoediter

开始使用

$ npm install rn-lm-photoediter --save

关联依赖

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

也可以手动安配置

Android 手动集成步骤

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

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

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

   include ':rn-lm-photoediter'
   project(':rn-lm-photoediter').projectDir = new File(rootProject.projectDir, 	'../node_modules/rn-lm-photoediter/android')

3. 主工程引用 android/app/build.gradle: compile project(':rn-lm-photoediter')

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 ➜ rn-lm-photoediter 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 PhotoEditer from "rn-lm-photoediter";

// 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",
      "https://hifond-oss.oss-cn-shanghai.aliyuncs.com/result.png",
      "https://hifond-oss.oss-cn-shanghai.aliyuncs.com/test.png"
    ];
    console.log(data);
    PhotoEditer.openPicEdit(data, this.resultCall);
  }}
/>;

<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://b-ssl.duitang.com/uploads/item/201603/06/20160306224210_TRBaQ.jpeg"
  }
  marks={[
    "d",
    "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.base64);
  }}
  onCancel={msg => {
    alert(msg.result);
    console.log(msg.result);
  }}
  onError={msg => {
    alert(msg.result);
    console.log(msg.result);
  }}
/>;