一瞒津、開源庫介紹

目前大多數(shù)App都有頭像展示的功能，在實際開發(fā)中括尸，用戶更換頭像的需求屢見不鮮巷蚪，社交方面的更為明顯。在React Native的開發(fā)下濒翻，同樣需要這樣的功能來完善App需求屁柏。眾多優(yōu)秀的開源庫讓我們在自己的項目中使用起來非常方便。例如：react-native-image-picker有送。該庫可以實現(xiàn)啟動本地相冊和照相機來采集圖片淌喻，但是作者沒有實現(xiàn)裁剪功能，針對頭像上傳的需求雀摘，一般都需要對圖片進行裁剪裸删。所以本篇和大家分享另一個開源庫：react-native-image-crop-picker。該庫同樣實現(xiàn)了本地相冊和照相機來采集圖片阵赠，并且提供多選涯塔、圖片裁剪等功能，支持iOS和Android兩個平臺清蚀，不同平臺需要分別配置匕荸，github上有詳細的文字說明。但是好多小伙伴都是android或者ios開發(fā)轧铁，可能對Android或IOS不熟悉每聪，配置起來會遇到很多問題，所以，我將以圖示的方式簡化配置步驟药薯，集成更為方便绑洛。

二、集成

react-native link react-native-image-crop-picker  ```

#三童本、配置
1. Android平臺
（1）Gradle版本必須大于2.2真屯，例如[react](http://lib.csdn.net/base/react) Native 0.44 創(chuàng)建項目，查看工程的build.gradle中默認gradle版本：

buildscript {
...
dependencies {
classpath 'com.android.tools.build:gradle:2.2.3'
...
}
...
} ```

（2）打開app下的build.gradle穷娱，在android / defaultConfig / 節(jié)點下添加useSupportLibrary：

android {  
    ...  
  
    defaultConfig {  
        ...  
        vectorDrawables.useSupportLibrary = true  
        ...  
    }  
    ...  
}  ```

（3）打開AndroidManifest.xml配置文件绑蔫，添加相機權(quán)限：

<uses-permission android:name="android.permission.CAMERA"/> ```

2. ios平臺
   （1）聲明權(quán)限
   在Xcode中打開Info.plist，并添加帶有值的字符串鍵NSPhotoLibraryUsageDescription泵额，描述為什么需要訪問用戶照片 以及NSCameraUsageDescription和NSMicrophoneUsageDescription配深。

image.png

（2）添加依賴
Cocapods的用戶

  1> 在Deployment Info標簽下，設(shè)置Deployment Target平臺版本為：8.0'
  2> 將pod'RSKImageCropper'和pod'QBImagePickerController'添加到Podfile

非Cocapods用戶

 1> 將node_modules / ios / ImageCropPickerSDK文件夾拖放的xcode項目根目錄下嫁盲。

image.png

2> 單info選項卡
在Deployment Info標簽下篓叶，設(shè)置Deployment Target平臺版本為：8.0'

image.png

在Target下點擊General,選擇Embedded Binaries單擊+并添RSKImageCropper.framework和QBImagePicker.framework

image.png

四、使用

1. 在UI文件中引入

import ImagePicker from 'react-native-image-crop-picker';  

2. 使用
   （1）從本地相冊選擇單幅圖像

ImagePicker.openPicker({  
  width: 300,  
  height: 400,  
  cropping: true  
}).then(image => {  
  console.log(' 圖片路徑：'+ image);  
});  

2）調(diào)用多個圖像

ImagePicker.openPicker({  
  multiple: true  
}).then(images => {  
  console.log(images);  
});  ```

（3）啟動相機拍照

ImagePicker.openCamera({
width: 300,
height: 400,
cropping: true
}).then(image => {
console.log(image);
});

（4）裁剪已有的圖片
```ImagePicker.openCropper({  
  path: 'my-file-path.jpg',  
  width: 300,  
  height: 400  
}).then(image => {  
  console.log(image);  
});  ```

關(guān)于其他屬性的使用羞秤，可以到github文檔進行查看即可缸托。

#五、效果圖
  ![](http://upload-images.jianshu.io/upload_images/2023270-bf5c2604cf439042?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)   ![](http://upload-images.jianshu.io/upload_images/2023270-1c32f6782248bf1c?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)

轉(zhuǎn)載于http://blog.csdn.net/u013718120/article/details/72781285