在另一个组件中显示上传的图像

Question

我有一个从图库中选择图像的代码，我想在选择图像后导航到另一个组件以在那里显示所选图像，它工作正常，直到我导航到它实际上不显示所选图像的另一个组件我不知道我应该如何在那里显示它，请帮助，这是代码：

state = {
 image: null,
};

_pickImage = async () => {
  const { navigate } = this.props.navigation;

  let result = await ImagePicker.launchImageLibraryAsync({
   allowsEditing: false,
   aspect: [4, 4],
  });

  navigate('ConfirmImage');

if (!result.cancelled) {
  this.setState({ image: result.uri });
 }

上传图片

let { image } = this.state;
<TouchableOpacity onPress={this._pickImage}><Text>Upload</Text></TouchableOpacity>

Answer 1

在 ConfirmImage 屏幕中显示图像

1. 您需要将图像 uri 作为导航参数从第一个屏幕传递。

 navigate(
  'ConfirmImage', 
  { uri : result.uri }
);

1. 访问 ConfirmImage 中传递的值。

//ConfirmImage.js 

 render() {
  const { navigation } = this.props;
  const uri = navigation.getParam('uri');

  return (
    <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
      <Image  style={{width: 50, height: 50}} source={{uri:uri}}/>
    </View>
  )
}