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

Question

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

这是我的功能代码

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 /> }

这是上传单张图片的图片

所以你能帮助我，获得多个图像或给我建议另一个我应该用来解决我的问题的图书馆

Answer 1

  

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

正如您在React Native Image Picker自述文件中所看到的，您无法使用此模块选择多个图像。您最好尝试使用React Native Image Crop Picker来执行此操作。

Answer 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)
        })

      })

  }

Answer 3

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