1. 版本环境:
"react": "16.13.1", "react-native": "0.63.2", "react-native-image-picker": "^2.3.3",
targetSdkVersion: 29。
问题还出现在:Android 10/ API 29..
2.出问题时代码:
<TouchableOpacity style={styles.addBtn} onPress={() => this.addImages(options)}> <Text style={styles.addText}>添加照片</Text> </TouchableOpacity>
addImages = (options) => { let { imgUrlArray } = this.state; let length = imgUrlArray.length; console.log(length) if(length === 9) { return; } 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) { console.log('User tapped custom button: ', response.customButton); } else { const source = { uri: response.uri, id: length + 1 + '' }; // You can also display the image using data: // const source = { uri: 'data:image/jpeg;base64,' + response.data }; imgUrlArray.push(source) this.setState({ imgUrlArray: imgUrlArray, }); } }); }
点击后无反应,但是进入了函数。
3.解决方法:
方案一:
android/app/src/main/AndroidManifest.xml 在application标签中加入
android:requestLegacyExternalStorage ="true"
这个办法,能够应用短期修复程序来解决此问题。
我认为这是由于Android 10范围内的存储隐私更改所致,并且将需要更新该库以及它如何从文件系统读取/写入。但是我的Android开发经验非常有限。
方案二:
import { PermissionsAndroid } from “react-native”
//功能函数中加入... const granted = await PermissionsAndroid.request( PermissionsAndroid.PERMISSIONS.WRITE_EXTERNAL_STORAGE, { title: 'We need your permission' }, ); if (granted === PermissionsAndroid.RESULTS.GRANTED) { console.log('You can use the camera'); ImagePicker.showImagePicker(options, async (response) => { if (response.didCancel) { console.log('User cancelled image picker'); } else if (response.error) { console.log('ImagePicker Error: ', response.error); console.log(response); } else if (response.customButton) { console.log('User tapped custom button: ', response.customButton); } else { const source = { uri: response.uri }; } }); } else { console.log('Camera permission denied'); }