React Native开发（二： 手动安装react-native-image-crop-picker)

前言

考虑到RN的不稳定性。如果项目迁移, 有些事，真是做一次觉得没什么，但是过段时间如果需要再去做一次，就有点抓狂。后期会继续更新

项目版本依赖

"dependencies": {
  "autobind-decorator": "^2.1.0",
  "md5": "^2.2.1",
  "mobx": "3.2.2",
  "mobx-react": "4.2.2",
  "prop-types": "^15.6.2",
  "react": "16.0.0-alpha.12",
  "react-native": "0.47.2"
 },
 "devDependencies": {
  "babel-eslint": "^8.2.3",
  "babel-jest": "23.2.0",
  "babel-plugin-transform-decorators-legacy": "^1.3.5",
  "babel-preset-react-native": "4.0.0",
  "babel-preset-react-native-stage-0": "^1.0.1",
  "eslint": "^4.19.1",
  "eslint-config-airbnb": "^16.1.0",
  "eslint-plugin-import": "^2.12.0",
  "eslint-plugin-jsx-a11y": "^6.0.3",
  "eslint-plugin-react": "^7.9.1",
  "eslint-plugin-react-native": "^3.2.1",
  "jest": "23.2.0",
  "react-test-renderer": "16.0.0-alpha.12"
 },

react-native-image-crop-picker

(1) 安装依赖

$ yarn add [email protected]

(2) 配置info.list(授权)

这个问题是因为iOS10对隐私权限的管理更为严格 ，比如访问的摄像头、麦克风等硬件，都需要提前请求应用权限、允许后才可以使用，或者现在要提前声明

路径：(project_name)/ios/(project_name)/Info.list

NSPhotoLibraryUsageDescription
$(PRODUCT_NAME)想访问你的相册
NSCameraUsageDescription
$(PRODUCT_NAME)想访问你的相机

(3) 添加SDK

将 node_modules/react-native-image-crop-picker/ios/ 中的ImageCropPickerSDK 目录拖拽进项目，勾选 Copy items if needed

**(4) 项目配置 **

因为rn版本，image-crop-picker 不能选用最新使用pod安装，需要使用非官方解决方案
查看这个issues详情

1. 项目配置 -> General -> Deployment Info，Deployment Target 设为 8.0

2. 项目配置 -> General -> Embedded Binaries，添加 RSKImageCropper.framework 与
   QBImagePicker.framework

3. 将 node_modules/react-native-image-crop-picker/ios/ 中的 imageCropPicker.xcodeproj 拖拽进项目的 Libraries 目录（若已存在，则略过这步）

截图如下：

**(5) 修改ImageCropPicker.h **

将其中的：
#import "QBImagePickerController/QBImagePickerController.h"
改为：
#import "QBImagePicker/QBImagePickerController.h"

Android

在 android/app/build.gradle 中配置：
android {
  defaultConfig {
    vectorDrawables.useSupportLibrary = true
  }
}