rn-lm-photoediter v0.0.56

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 test from "../../Images/top_logo.png";

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",
      "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);
  }}
/>;