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

Question

我想用 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)

Answer 1

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

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