[英]How to pass data back to previous screen in react native navigation v5?
我刚刚更新以响应本机导航版本 5。现在我试图在 goBack() 调用中将数据发送回前一个屏幕。
我推下一个视图
const onSelectCountry = item => {
console.log(item);
};
navigation.navigate('SelectionScreen', {
onSelect: onSelectCountry});
并在通过调用从 FlatList 中选择项目后返回:
function onSelectedItem(item) {
route.params.onSelect(item);
navigation.goBack();
}
但是通过使用参数发送函数,我收到一个警告:在导航状态中发现了不可序列化的值......
有人可以告诉我正确的方法来做到这一点。
导航将数据发送到屏幕。
onPress={() => {
// Pass params back to home screen
navigation.navigate('Home', { post: postText });
按照官方文档React Native
这是一个实现
画面A
const Screen1 = ({navigation, route}) => {
const [item, setItem] = useState(null);
useEffect(() => {
navigation.addListener('focus', () => {
console.log(route.params)
})
}, [])
const onPress = () => {
navigation.navigate('Screen2', {onReturn: (item) => {
setItem(item)
}})
}
return (
// Components
)
}
屏幕2:
const Screen2 = ({navigation, route}) => {
useEffect(() => {
navigation.addListener('focus', () => {
console.log(route.params)
})
}, [])
// back Press
const onPress = () => {
route.params.onReturn(item);
navigation.goBack()
}
return (
// Components
)
}
我访问了这篇文章,因为我想在 2 个堆栈中使用相同的公共组件。 如何知道如何返回并传递参数?
我通过首先传递一个参数来解决它,该参数将标识从何处访问组件。 然后,我没有使用不接受参数的 goBack(),而是导航到上一个路由并传递参数。
//in Stack1
navigation.navigate('commonComponent', isStack1: true)
//in Stack2
navigation.navigate('commonComponent', isStack1: false)
//in CommonComponent, instead of goback(), use navivation.navigate
function CommonComponent({ navigation, route }) {
const {isStack1} = route.params
const customRoute = isStack1 ? 'routeNameInStack1' : 'routeNameInStack2'
return (
<Button title="Go back" onPress={() => navigation.navigate('customRoute', {myParams: 'blabla...') />
)
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.