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

时间:2018-09-21 13:46:46

标签: react-native react-navigation react-native-image-picker

我有一个代码可以从图库中拾取图像,我希望在选择图像后导航到另一个组件以在其中显示选定的图像,在我导航到另一个组件之前它实际上没有显示选定的图像,它工作正常我不知道该如何显示在这里,请帮忙,这是代码:

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>

1 个答案:

答案 0 :(得分:0)

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