时间戳

首页 > 解决方案 > 在另一个组件中显示上传的图像

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

问题描述

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

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>

标签： react-nativereact-navigationreact-native-image-picker

解决方案

在 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>
  )
}

推荐阅读