RN开发 上传照片Demo

记录一次使用image-picker库，对于有相关需求的有些帮助，详细请到 官方查看API

首先安装依赖

react-native-image-picker

引入依赖

import ImagePicker from 'react-native-image-picker';

布局

  <View style={{ flexDirection: 'column', alignItems: 'center', marginTop: 20, justifyContent: 'center' }}>
           <View style={styles.img}>
            <TouchableOpacity onPress={() => this.handleSaveImg('img1')}>
              <View
                style={[ styles.avatar,styles.avatarContainer,]}>
                {img1Source.uri === '' ? (
                  <Text style={styles.texs}>点击上传身份证正面</Text>
                ) : (
                    <Image style={styles.avatar} source={{ uri: img1Source.uri }} />
                  )}
              </View>
            </TouchableOpacity>
            </View>
            <View style={styles.img}>
            <TouchableOpacity onPress={() => this.handleSaveImg('img2')}>
              <View
                style={[styles.avatar,styles.avatarContainer,]}
              >
                {img2Source.uri === '' ? (
                  <Text style={styles.texs}>点击上传身份证反面</Text>
                ) : (
                    <Image style={styles.avatar} source={{ uri: img2Source.uri }} />
                  )}
              </View>
            </TouchableOpacity>
            </View>

引入样式

const styles=StyleSheet.create({
 avatarContainer: {
    borderColor: '#9B9B9B',
    // borderWidth: 1 / PixelRatio.get(),
    borderWidth: 1,
    justifyContent: 'center',
    alignItems: 'center',
    borderRadius:6
  },
  avatar: {
    width: 320,
    height: 180,
  },
  img:{
    flex: 1,
    marginBottom:26
  },
})

事件处理

// 开发中没有使用ts请忽略
type ImageType = {
  fileName?: string;
  // data: string;
  uri: string;
}
/**
 * 相机基础配置
 */
const options: any = {
  title: '选择图片',
  takePhotoButtonTitle: '拍照',
  chooseFromLibraryButtonTitle: '图片库',
  cancelButtonTitle: '取消',
  cameraType: 'back',
  mediaType: 'photo',
  videoQuality: 'medium',
};
  handleSaveImg = (type: string) => {

    ImagePicker.showImagePicker(options, (response: any) => {
      console.log('Response = ', response);

      if (response.didCancel) {
        console.log('User cancelled video 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 { fileName, data, uri } = response;
        let imgSource: ImageType = {
          fileName,
          // data,
          uri
        }
        if (type === 'img1') {
          this.setState({
            img1Source: imgSource
          })
        } else {
          this.setState({
            img2Source: imgSource
          });
        }
      }
    });
  }