注意:此查询适用于 React-navigation 5。
在 react 导航 4 中,我们可以在导航时将函数作为参数传递,但在 react 导航 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
});
};
最佳答案
不建议通过 react native 导航参数传递回调,这可能会导致状态卡住(无法正确更新)。这里更好的解决方案是使用 EventEmitter,因此回调保留在 Screen1 中,并在 Screen2 发出事件时调用。
屏幕 1 代码:
import {DeviceEventEmitter} from "react-native"
DeviceEventEmitter.addListener("event.testEvent", (eventData) =>
callbackYouWantedToPass(eventData)));
屏幕 2 代码:
import {DeviceEventEmitter} from "react-native"
DeviceEventEmitter.emit("event.testEvent", {eventData});
useEffect(() => {
return () => {
DeviceEventEmitter.removeAllListeners("event. testEvent")
};
}, []);
关于reactjs - 在react-navigation 5中将函数作为参数传递,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/60114496/