如何拍照,重定向到显示图像的新页面?
Howto take a photo, redirect to a new page where the image is displayed?
我想用 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)
错误是我忘记在图像的样式中添加 width
:
<Image
style={{ height: 170, width: 200, alignSelf: "center" }}
source={{ uri: this.props.navigation.state.params.photoUri }}
resizeMode="contain"
/>
我想用 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)
错误是我忘记在图像的样式中添加 width
:
<Image
style={{ height: 170, width: 200, alignSelf: "center" }}
source={{ uri: this.props.navigation.state.params.photoUri }}
resizeMode="contain"
/>