如何使用反应原生图像选择器添加多个图像答案

【问题标题】：How to add multiple image using react native image picker如何使用反应原生图像选择器添加多个图像
【发布时间】：2017-08-07 09:35:17
【问题描述】：

我正在构建一个简单的社交媒体应用程序。用户可以添加状态、位置、来自 youtube 的视频和照片。但是我在使用 react native image picker 上传多张图片时遇到了问题。我已阅读文档，但我不知道如何解决问题

这是我的功能代码

onPhotoPress() {
 const options = {
  quality: 1.0,
  maxWidth: 50,
  maxHeight: 50,
  storageOptions: {
    skipBackup: true,
  },
};
ImagePicker.launchImageLibrary(options, openPicker(), (response) => {
  console.log('Response = ', response);

  if (response.didCancel) {
    console.log('User cancelled photo 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: `data:image/jpeg;base64,${response.data}` };

    this.setState({
      avatarSource: source,
      name: response.fileName,
      data: response.data,
      type: response.type,
      path: response.uri,
    });
  }
 });
}

这是我查看图片的代码

         {this.state.avatarSource !== null ?
          <Image
            source={this.state.avatarSource}
            style={{
              flex: 1,
              resizeMode: 'contain',
              marginVertical: 12,
            }}
          /> : <View /> }

这是上传单张图片的图片

所以你能帮我获取多张图片或给我建议我应该使用另一个库来解决我的问题

【问题讨论】：

标签： react-native

【解决方案1】：

这个库最初是作为原生 iOS 图像选择器的基本桥梁，我希望保持这种状态。因此，此处不支持超出本机 UIImagePickerController 支持的功能。 多个图像选择、对裁剪工具的更多控制以及横向支持是原生 iOS 功能所缺少的 - 我的库没有问题。如果您需要这些东西，react-native-image-crop-picker 可能是您更好的选择。

正如您在React Native Image Picker README 中看到的，您不能使用此模块进行多张图片选择。你最好尝试使用React Native Image Crop Picker 来做到这一点。

【讨论】：

不支持世博会：-/
Android 不支持 maxFile 功能

【解决方案2】：

100% Sure this is working

use the library for multiple images selection and upload 
react-native-image-crop-picker

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


  takePics = () => {
    ImagePicker.openPicker({
      width: 200,
      height: 200, compressImageMaxHeight: 400,
      compressImageMaxWidth: 400, cropping: true, multiple: true
    })
      .then(response => {
        let tempArray = []
        console.log("responseimage-------" + response)
        this.setState({ ImageSource: response })
        console.log("responseimagearray" + this.state.ImageSource)
        response.forEach((item) => {
          let image = {
            uri: item.path,
            // width: item.width,
            // height: item.height,
          }
          console.log("imagpath==========" + image)
          tempArray.push(image)
          this.setState({ ImageSourceviewarray: tempArray })
          // console.log('savedimageuri====='+item.path);

          console.log("imagpath==========" + image)
        })

      })

  }

【讨论】：

这里如何打开相机？
takePics = () => { ImagePicker.openCamera({ width: 200, height: 200, compressImageMaxHeight: 400, compressImageMaxWidth: 400, cropping: true, multiple: true })
Android 不支持 maxFile 功能

【解决方案3】：

如果您希望添加多个图像，请尝试使用多重选择器或在此模块中选择图像后对响应进行递归调用。向用户显示弹出窗口以添加更多图像并将所有图像添加到列表中。

【讨论】：

什么是multi-picker？