Record_2020-04-27-16-18-29_edff3d4e83b0070286d2e7.gif
a3pp1-t84tp.gif
首先放出轮子大哥的链接：react-native-image-picker
好了，下面跟着我一步步配置吧。
1 依赖
yarn add react-native-image-picker
完成了之后在项目终端里执行
如果你的rn版本大于0.60则执行
cd ios && pod install && cd ../
否则执行
react-native link react-native-image-picker
啥，你的RN版本低到要手动依赖?还是先更新上来吧都2020年了！
2 配置
2.1 IOS
你可以用xcode打开项目的ios文件夹里的“你的项目名称”.xcworkspace，也可以直接在当前ide直接修改文件
2.1.1 xcode里的修改方法（选其一）
image.png
点击+号 添加对应的4个权限（访问、保存图片，调起相机，录像）
2.1.2 直接修改文件（选其一）
打开info.plist文件
image.png
添加
<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文件夹，找到以下地方
image.png
添加
<uses-permission android:name="android.permission.CAMERA" />
<uses-permission android:name="android.permission.WRITE_EXTERNAL_STORAGE"/>
最好再加一个（不要问！）
<uses-permission android:name="android.permission.READ_EXTERNAL_STORAGE"/>
2.2.2 直接修改文件（选其一）
一个道理，在项目的android/app/src/main/底下的AndroidManifest.xml文件里加入
image.png
好了，Android也配置完了。
3 使用
导入库
import ImagePicker from 'react-native-image-picker';
在你点击的时候调用
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的参数是(更多的配置可以去github的api里面找，里面有每一个参数的解释)
const options = {
title: '请选择',
cancelButtonTitle:'取消',
takePhotoButtonTitle:'拍照',
chooseFromLibraryButtonTitle:'从相册选择',
storageOptions: {
skipBackup: true,
path: 'images',
},
};
以上代码是包含相机以及相册（ui+功能），如果你想要直接触发某项功能，可以调用以下方法
function openCamera(){
ImagePicker.launchCamera(options , (response) =>{
console.log("response:" + response.path)
})
}
function openImageLibrary(){
ImagePicker.launchImageLibrary(options , (response) =>{
console.log("response:" + response.path)
})
}
关于response的返回值在github的api里也有详细说明。
好了，介绍结束，其实还有个更高star的库react-native-camera，而且是有人脸识别功能的，但我觉得普通项目用本文这个已经够用了。
ps:如果跑项目报了一些莫名其妙的错误，可以试着删除node_modules，然后在项目命令行里执行
npm install
顺便重新执行
cd ios && pod install && cd ../
反正好几次我都这样莫名其妙的搞定了莫名其妙的报错...
