1

I want to capture a photo with react-native-camera, then pass that image as params when I navigate to the preview page. I'm able to pass along the URI to the photo I just took, but <Image> is not able to display it. I've tried both require and uri, but non of them work. Any suggestions on what I should do?

E.g:

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)
4

1 回答 1

0

错误是我忘记添加width图像的样式：

    <Image
      style={{ height: 170, width: 200, alignSelf: "center" }}
      source={{ uri: this.props.navigation.state.params.photoUri }}
      resizeMode="contain"
    />
于 2018-03-06T16:11:45.577 回答