时间戳

首页 > 解决方案 > 如何在视图中设置状态并显示画廊中的多个选定图像

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

问题描述

我是 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>

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

标签： react-native

解决方案

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>

如果您想从画廊和相机中选择，然后创建一个按钮并显示来自画廊或相机的选项并调用不同的函数来拍摄图像

推荐阅读