一、下载
yarn add react-native-image-picker
二、配置
Android原生配置
在项目目录android/app/src/main/AndroidManifest.xml文件中,进行以下添加 (以下配置有可以忽略):
<uses-permission android:name="android.permission.CAMERA" /> <uses-permission android:name="android.permission.READ_EXTERNAL_STORAGE" /> <uses-permission android:name="android.permission.WRITE_EXTERNAL_STORAGE" />
IOS配置
ios/项目名/Indo.plist添加
<key>NSPhotoLibraryUsageDescription</key> <string>需要访问您的相册以选择图片<sring>
三、使用
import {launchImageLibrary} from 'react-native-image-picker';
选择图片事件
const selectImage = () => { const options = { mediaType: 'photo', includeBase64: true, //是否需要base64位 quality: 0.5, maxWidth: 1000, maxHeight: 1000, }; launchImageLibrary(options, response => { console.log(response, 'response'); if(response.assets[0]){ const uri=response.assets[0].uri setImageUri(uri) } }); };
<View style={[styles.upload]}> {imageUri && ( <Image source={{uri: imageUri}} style={{width: 165.5, height: 104}} /> )} <TouchableOpacity onPress={selectImage} style={{alignItems: 'center'}}> <Image source={require('../../assets/images/photo.png')} style={{width: 44, height: 44, marginBottom: 12}}></Image> <Text style={{color: '#2779FF', fontSize: 14}}>Upload Back</Text> </TouchableOpacity> </View>