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屏幕中显示图像

您需要在“第一屏幕”中将图像uri作为导航参数传递。

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

访问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>
  )
}

在其他组件中显示上传的图像

1 个答案: