# react-native-picedit

> ## Getting started

Latest version **1.1.8** (published 2019-06-27) · 0 weekly downloads

## Install

```sh
npm install react-native-picedit
pnpm add react-native-picedit
yarn add react-native-picedit
bun add react-native-picedit
```

## Health

**Score 15/100 (F)** — status: abandoned.

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.1.8 |
| Published | 2019-06-27 |
| First published | 2019-06-22 |
| Weekly downloads | 0 |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 0 |
| Unpacked size | 513.4 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Maintainers | daiyehao |
| Keywords | react-native |

## Links

- npm: https://www.npmjs.com/package/react-native-picedit
- npm.io page: https://npm.io/package/react-native-picedit

## Recent versions

- 1.1.8 (latest) — 2019-06-27
- 1.1.7 — 2019-06-27
- 1.1.6 — 2019-06-25
- 1.1.5 — 2019-06-25
- 1.1.4 — 2019-06-25
- 1.1.3 — 2019-06-25
- 1.1.2 — 2019-06-25
- 1.0.2 — 2019-06-24
- 1.0.1 — 2019-06-22

## README

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

## 使用

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

```

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

---
_Source: https://npm.io/package/react-native-picedit · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._