react-native 图片选择器

一、下载

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>