如何在 React Native Navigation 中为 goBack() 函数传递参数

Question

我知道这是一个愚蠢的问题。 我有一个组件，我们称之为

Component

，它在多个屏幕中使用，例如

Screen1

，

Screen2

，... 在

Component

中，当用户单击按钮时，我将导航到新屏幕，我们称其为

ImagePicker

。

我的问题是如何返回并传递参数（在本例中为图像数据）并将其返回到

Component

我尝试使用

navigation.goBack({img: image})

但没用。我也无法使用

navigation.navigate('Screen')

，因为我的函数位于

Component

组件中。

那么解决我的问题的最佳方案是什么？

Answer 1

我们无法将任何参数传递给 goBack 方法。

如果必须这样做，我们可以使用navigate方法导航到后屏幕，并使用此方法我们可以将参数传递到前一个屏幕。

使用navigation.navigate，您可以导航到所需的屏幕并通过参数传递数据。在目标屏幕上，您可以通过 route 访问此数据，特别是使用 route.params 来检索传递的值。

例如。

navigation.navigate('PrevScreenName', {key: value})

// PrevScreenName
function PrevScreenNameFunction({route, others}) {
    const { key } = route.params;
 }

查看反应导航的官方文档。

反应导航

Answer 2

如果我很好地理解你的问题，就这样做

navigation.navigate('Screen', {img: image})

而不是

navigation.goBack({img: image})

它应该可以工作

Answer 3

在组件代码中，我会将回调函数传递到图像选择器屏幕

handleImageData = (data) =>
{
   // do whatever
}
...
navigation.navigate('ImagePickerScreen',{mycallback:this.handleImageData});

然后在屏幕代码中这样称呼它

this.props.route.params.mycallback(data);
navigation.goBack();