如何在 React Native 中将图像作为导航参数传递答案

【问题标题】：How to pass image as a navigate parameter in React Native如何在 React Native 中将图像作为导航参数传递
【发布时间】：2020-01-03 17:47:46
【问题描述】：

我正在使用 Image Picker 来获取用户照片，然后我需要在下一个屏幕中显示它。我怎样才能做到这一点？

图像选择器功能：

const options={
    title: 'Profile picture',
    takePhotoButtonTitle: 'Take picture',
    chooseFromLibraryButtonTitle: 'Choose from gallery'
}

myFun=()=>{
    ImagePicker.showImagePicker(options, (response) => {
        console.log('Response = ', response);

        if (response.didCancel) {
          console.log('User cancelled image picker');
        } else if (response.error) {
          console.log('ImagePicker Error: ', response.error);
        }
         else {
          const source = { uri: response.uri };

          // You can also display the image using data:
          // const source = { uri: 'data:image/jpeg;base64,' + response.data };

          this.setState({
            avatarSource: source,
          });
        }
      });
}

我需要使用此按钮将图像传递到下一个屏幕：

<GradientButton text='Next' onPress={() => {this.props.navigation.navigate('NextScreen', {photo: this.state.avatarSource} )}}/>

这就是我尝试的方式，但我无法让它工作，我只设法通过导航参数传递正常值，如字符串。

【问题讨论】：

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

【解决方案1】：

<GradientButton text='Next' onPress={() => {this.props.navigation.navigate('NextScreen' {photo: this.state.avatarSource} )}}/>

看起来有语法错误，你必须在'NextScree'后面加一个逗号，这样它应该是;

<GradientButton text='Next' onPress={() => {this.props.navigation.navigate('NextScreen', {photo: this.state.avatarSource} )}}/>

在下一个屏幕中，您可以使用 props.navigation.getParam('photo') 获取此数据。

希望对您有所帮助。

【讨论】：

其实这是我的错误，我可能在 Stack Overflow 中不小心删除了问题中的逗号，但在我的代码中有逗号，我会修复问题中的逗号。顺便问一下，您确定这种方法可以传递图像吗？因为我完全按照你说的做了，我只能传递像字符串这样的“简单”变量。
我刚刚发现我可以在 NextScreen 中使用 console.log() 来打印有关图像的信息并且它可以工作，唯一的问题是我无法使用例如
我需要查看图像的代码，这样我才能知道它出了什么问题。我假设您可能使用了错误类型的源对象。请在您的问题帖子中添加您的图像渲染代码。