[英]How to pass data back to previous screen in react native navigation v5?
[英]How to go back to another stack in react native navigation v5?
我想從 AboutStack 中的 About 組件導航到 HomeStack 中的 Home Details:
HomeStack.js
export default function HomeStack() {
return (
<Stack.Navigator>
<Stack.Screen component={Home} name="Home" />
<Stack.Screen component={HomeDetail} name="HomeDetail" />
</Stack.Navigator>
);
}
關於Stack.js
export default function AboutStack() {
return (
<Stack.Navigator>
<Stack.Screen component={About} name="About" />
<Stack.Screen component={AboutDetail} name="AboutDetail" />
</Stack.Navigator>
);
}
在 About 組件中,我導航到 HomeStack 導航器中的 HomeDetails 屏幕:
關於.js
<Button
title="Go Home details"
onPress={() => navigation.navigate('HomeStack', { screen: 'HomeDetail' })} />
在 HomeDetail 屏幕中,我嘗試將 go 返回,這應該 go 返回 AboutStack 的 About 屏幕,但它會轉到 HomeStack 的主屏幕:
HomeDetail.js
<Button onPress={() => navigation.goBack()} title="Go back" />
它回到它自己的堆棧的根屏幕。
這是我正在使用的導航版本:
"@react-navigation/native": "^5.8.10",
"@react-navigation/stack": "^5.12.8",
我如何 go 從 HomeStack 的 HomeDetails 屏幕返回 About Stack 的 About 屏幕?
我通過將 url 參數傳遞給 HomeDetail 屏幕解決了這個問題,如下所示:
關於.js
navigation.navigate('HomeDetail', { url: 'About' })
HomeDetail.js
function HomeDetail({ navigation, route }) {
console.log(route);
return (
<View style={{ marginTop: 300 }}>
<Text>Home Detail</Text>
<Button onPress={() => navigation.navigate(route.params.url)} title="Go back" />
</View>
);
}
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.