首先放出輪子大哥的鏈接：react-native-image-picker
好了，下面跟著我一步步配置吧。
1 依賴
yarn add react-native-image-picker
完成了之后在項目終端里執(zhí)行
如果你的rn版本大于0.60則執(zhí)行
cd ios && pod install && cd ../
否則執(zhí)行
react-native link react-native-image-picker
啥，你的RN版本低到要手動依賴?還是先更新上來吧都2020年了！
2 配置
2.1 IOS
你可以用xcode打開項目的ios文件夾里的“你的項目名稱”.xcworkspace，也可以直接在當前ide直接修改文件
2.1.1 xcode里的修改方法（選其一）
點擊+號 添加對應(yīng)的4個權(quán)限（訪問、保存圖片，調(diào)起相機，錄像）
2.1.2 直接修改文件（選其一）
打開info.plist文件
添加
<key>NSPhotoLibraryUsageDescription</key>
<string>$(PRODUCT_NAME) would like access to your photo gallery</string>
<key>NSCameraUsageDescription</key>
<string>$(PRODUCT_NAME) would like to use your camera</string>
<key>NSPhotoLibraryAddUsageDescription</key>
<string>$(PRODUCT_NAME) would like to save photos to your photo gallery</string>
<key>NSMicrophoneUsageDescription</key>
<string>$(PRODUCT_NAME) would like to use your microphone (for videos)</string>
（key-string一對一對的）
好了，ios配置完成，然后滾去配置android
2.2 Android
2.2.1 android studio里的修改方法（選其一）
使用android studio打開項目的android文件夾，找到以下地方
添加
<uses-permission android:name="android.permission.CAMERA" />
<uses-permission android:name="android.permission.WRITE_EXTERNAL_STORAGE"/>
最好再加一個（不要問?。?/p>
<uses-permission android:name="android.permission.READ_EXTERNAL_STORAGE"/>
2.2.2 直接修改文件（選其一）
一個道理，在項目的android/app/src/main/底下的AndroidManifest.xml文件里加入
好了，Android也配置完了。
3 使用
導(dǎo)入庫
import ImagePicker from 'react-native-image-picker';
在你點擊的時候調(diào)用
ImagePicker.showImagePicker(options, (response) => {
console.log('Response = ', response);
if (response.didCancel) {
console.log('User cancelled image picker');
} else if (response.error) {
console.log('ImagePicker Error: ', response.error);
} else if (response.customButton) {
Alert.alert('自定義按鈕:' + response.customButton)
} else {
const source = { uri: response.uri };
Alert.alert(JSON.stringify(source))
console.log("source:" + JSON.stringify(source))
}
});
其中options的參數(shù)是(更多的配置可以去github的api里面找，里面有每一個參數(shù)的解釋)
const options = {
title: '請選擇',
cancelButtonTitle:'取消',
takePhotoButtonTitle:'拍照',
chooseFromLibraryButtonTitle:'從相冊選擇',
storageOptions: {
skipBackup: true,
path: 'images',
},
};
以上代碼是包含相機以及相冊（ui+功能），如果你想要直接觸發(fā)某項功能，可以調(diào)用以下方法
function openCamera(){
ImagePicker.launchCamera(options , (response) =>{
console.log("response:" + response.path)
})
}
function openImageLibrary(){
ImagePicker.launchImageLibrary(options , (response) =>{
console.log("response:" + response.path)
})
}
關(guān)于response的返回值在github的api里也有詳細說明。
好了，介紹結(jié)束，其實還有個更高star的庫react-native-camera，而且是有人臉識別功能的，但我覺得普通項目用本文這個已經(jīng)夠用了。
ps:如果跑項目報了一些莫名其妙的錯誤，可以試著刪除node_modules，然后在項目命令行里執(zhí)行
npm install
順便重新執(zhí)行
cd ios && pod install && cd ../
反正好幾次我都這樣莫名其妙的搞定了莫名其妙的報錯...
