NOTE:此查询用于react-navigation5。
在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
});
};
代替在参数中传递onSelect
功能,您可以使用navigate
将数据传递回前一屏幕:
// `CountrySelect` screen
_onPress = (country, country_code, calling_code) => {
const { navigation, route } = this.props;
navigation.navigate('NameOfThePreviousScreen', {
selection: {
country_name: country,
country_code: country_code,
calling_code: calling_code
}
});
};
然后,您可以在第一个屏幕(在componentDidUpdate
或useEffect
中处理此问题:]]
componentDidUpdate(prevProps) {
if (prevProps.route.params?.selection !== this.props.route.params?.selection) {
const result = this.props.route.params?.selection;
this._onSelectCountry(result);
}
}