# 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`)<

## 使用

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

```

```javascript
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);
  }}
/>;
```