**注:**此查询针对react-navigation 5。
在react navigation 4中,我们可以在导航时将函数作为参数传递,但在react navigation 5中,它会抛出一个关于序列化参数的警告。
基本上,我尝试做的是,从父屏幕导航到子屏幕,获取新值并更新父屏幕的状态。
以下是我目前正在实施的方法:
父屏幕
_onSelectCountry = (data) => {
this.setState(data);
};
.
.
.
<TouchableOpacity
style={ styles.countrySelector }
activeOpacity={ 0.7 }
onPress={ () => Navigation.navigate("CountrySelect",
{
onSelect: this._onSelectCountry,
countryCode: this.state.country_code,
})
}
>
.
.
.
</TouchableOpacity>
子屏
_onPress = (country, country_code, calling_code) => {
const { navigation, route } = this.props;
navigation.goBack();
route.params.onSelect({
country_name: country,
country_code: country_code,
calling_code: calling_code
});
};
4条答案
按热度按时间vatpfxk51#
不建议通过react本机导航参数传递回调,这可能会导致状态冻结(无法正确更新)。这里更好的解决方案是使用EventEmitter,这样回调就留在Screen1中,每当Screen2发出事件时就会调用。
屏幕1代码:
屏幕2代码:
qcuzuvrc2#
您可以使用
navigate
将数据传递回上一个屏幕,而不是在params中传递onSelect
函数:然后,您可以在第一个屏幕中(在
componentDidUpdate
或useEffect
中)处理此操作:8ehkhllq3#
有一种情况,你必须把一个函数作为参数传递给屏幕。
例如,您有第二个(独立的)
NavigationContainer
,它在Modal
中呈现,当您在某个屏幕中按Done时,您必须隐藏(关闭)Modal
组件。目前我看到的唯一解决方案是将所有内容都放在
Context.Provider
中,然后在屏幕中使用Context.Consumer
来调用Modal
的示例方法hide()
。cclgggtu4#
它抛出警告的部分原因是因为在导航参数中传递函数会使地址栏变得混乱,并且当将应用程序作为启用链接的react-native-web的Web应用程序运行时会导致错误。然而,你是对的,如果你只是为移动设备开发,它会工作得很好,只是风格不好(请参阅https://reactnavigation.org/docs/params/#what-should-be-in-params)。
<NavigationContainer linking ={{enabled:真实的
您可以使用DeviceEventEmitter之类的库来避免这种情况,但这很容易做到,无需添加另一个冗余库。
因此,如果我们想将facilities.js中的函数传递给facility-details.js并调用它,我们只需要在导航之前调用facilities中的setPageData,然后在facility details中调用getPageData: