Question

我对react-native还是陌生的。我曾经使用npm react-native-image-crop-picker来访问图库和相机。我一次只能访问图库或相机。如何同时访问它们同时显示，如何在视图中显示多个选定的图像？任何帮助，将不胜感激。预先谢谢。我的示例代码，

galleryAccessFunc() {
        ImagePicker.openPicker({
            multiple: true
          }).then(image => {
            console.log(image)
            this.setState({ImageSource:image.path})
          });debugger
    }

当我尝试显示选定的图像时，它会返回一个空视图，

<TouchableOpacity onPress={this.galleryAccessFunc.bind(this)} >
          <View style={styles.ImageContainer}>
          { this.state.ImageSource === null ? <Text>Select a Photo</Text> :
              <Image style={styles.ImageContainer} source={ this.state.ImageSource} />
            }
          </View>
        </TouchableOpacity>

以及如何同时访问画廊和相机？

Answer 1

pickMultiple() {
        ImagePicker.openPicker({
  multiple: true,
  waitAnimationEnd: false
}).then(images => {
  this.setState({
    image: null,
    images: images.map(i => {
      console.log('received image', i);
      return {uri: i.path, width: i.width, height: i.height, mime: i.mime};
    })

  });
 }).catch(e => alert(e));
 }

并以这种方式查看

<ScrollView horizontal >
     this.state.images.map((i,key) => <View key={i.uri}>{this.renderAsset(i,key)} 
</View>) : 
  </ScrollView>

如果您想同时从图库和摄影机中进行选择，然后创建一个按钮，并显示一个类似图库或照相机的选项，并调用其他功能来拍照

如何设置状态并在视图中显示画廊中的多个选定图像

1 个答案: