如何拍照，重定向到显示图像的新页面？

Posted 2023-03-11

【中文标题】如何拍照，重定向到显示图像的新页面？

【英文标题】：Howto take a photo, redirect to a new page where the image is displayed?

【发布时间】：2018-03-06 16:04:06

【问题描述】：

我想用 react-native-camera 拍摄照片，然后在导航到预览页面时将该图像作为参数传递。 我可以将 URI 传递给我刚刚拍摄的照片，但 <Image> 无法显示它。我已经尝试过require 和uri，但它们都不起作用。对我应该做什么有什么建议吗？

例如：

src/containers/TakePicture.tsx

 84   public shoot = async function() 
 85     if (this.camera) 
 86       const options =  quality: 0.5, base64: true 
 87       const data = await this.camera.takePictureAsync(options)
 88       console.log(data.uri)
 89       this.props.navigation.navigate(PREVIEW_PHOTO,  photoUri: data.uri )
 90     
 91   

src/containers/PreviewPhoto.tsx

  public render() 
    return (
      <View>
        <Text> image: JSON.stringify(this.props.navigation.state.params.photoUri) </Text>

         /*
        photoUri : "file:///data/user/0/no.my.app/cache/Camera/ +
                     "aa12ebc2-11b2-4fff-a946-8362dc52251f.jpg"
        */ 

        <Image
          style= height: 170, alignSelf: "center" 
          source= uri: this.props.navigation.state.params.photoUri 
         resizeMode="contain"
        />

      </View>
    )

  


export default connect<IStateToProps, IDispatchToProps>(
  mapStateToProps,
  mapDispatchToProps,
)(PreviewPhoto)

【问题讨论】：

帮帮我 -- ***.com/questions/49892807/…

【参考方案1】：

错误是我忘记在图片样式中添加width：

    <Image
      style= height: 170, width: 200, alignSelf: "center" 
      source= uri: this.props.navigation.state.params.photoUri 
      resizeMode="contain"
    />