如何在反应原生导航 v5 中返回另一个堆栈？答案

【问题标题】：How to go back to another stack in react native navigation v5?如何在反应原生导航 v5 中返回另一个堆栈？
【发布时间】：2020-12-19 16:28:05
【问题描述】：

我想从 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 屏幕中，我尝试返回应该返回 AboutStack 中的 About 屏幕，但它会返回 HomeStack 中的主屏幕：

HomeDetail.js

    <Button onPress={() => navigation.goBack()} title="Go back" />

它会回到它自己的 Stack 的根屏幕。

这是我正在使用的导航版本：

    "@react-navigation/native": "^5.8.10",
    "@react-navigation/stack": "^5.12.8",

如何从 HomeStack 的 HomeDetails 屏幕返回 About Stack 的 About 屏幕？

【问题讨论】：

标签： javascript reactjs react-native react-navigation react-navigation-v5

【解决方案1】：

我通过将 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>
    );
}

【讨论】：