昨天在使用RN的react-native-image-picker(v2.3.4)组件时遇到了一个问题,通过yarn添加组件后,根据文档导入变量并调用相机拍照
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33
| import ImagePicker from 'react-native-image-picker'; cameraOperation() { const options = { title: 'Take a photo', customButtons: [{ name: 'fb', title: 'Choose photo from Facebook' }], storageOptions: { skipBackup: true, path: 'images' } }; ImagePicker.showImagePicker(options, (response) => { console.log('Response = ', response); if (response.didCancel) { console.log('User cancled image picker'); } else if (response.error) { console.error('ImagePicker error:', response.error); } else if (response.customButton) { console.log('User tapped custom button:', response.customButton); } else { console.log(response.uri); const source = { uri: response.uri }; this.setState({ avatarSource: source }); } }); }
|
然而在运行时,却抛出了标题所述的错误,开始不得其解,后来搜索了一下资料,原来是因为API29的原因,API29对应的安卓版本是Android10,而Android中引入了分区存储(Scoped storage)的概念,这样做的初衷是为了避免APP乱写文件从而产生很多乱七八糟的冗余文件,更好的保护用户数据,具体的介绍可以看这里(传送门)
解决方法
修改AndroidManifest.xml文件
我用的RN版本是0.63.3,react-native-cli的版本是4.13.0,项目是用react-native-cli来init的,AndroidManifest.xml路径在android/app/src/main下,在application标签中,添加
android:requestLegacyExternalStorage ="true"
属性,即可正常调用摄像头并拍照~