从嵌套导航返回时反应导航崩溃答案

【问题标题】：React-navigation crash when going back from a nested navigation从嵌套导航返回时反应导航崩溃
【发布时间】：2022-01-25 01:29:54
【问题描述】：

我在我的 React 本机应用程序上使用 React-navigation 6 我在BottomStackNavigator 中有两个StackNavigator，每个堆栈上都有这些屏幕和参数：

export type BottomNavigationStack = {
    Planner: undefined,
    Profile: undefined,
}

export type PlannerNavigationStack = {
    PlannerHome: undefined,
    PlannerDetails: {
        detail: { ... }
    },
    Profile: {
        screen: string,
        initial?: boolean,
        params?: { [name: string]: string }
    }, // We can go to ProfileNavigationStack from PlannerNavigationStack
}

export type PlannerNavDetailProps = StackScreenProps<PlannerNavigationStack, 'PlannerDetails'>

export type ProfileNavigationStack = {
    ProfileHome: undefined,
    ProfileAddThings: {
        service: string
        from: string,
    },
    Planner: {
        screen: string,
        initial?: boolean,
        params?: { [name: string]: string }
    }, // We can go to PlannerNavigationStack from ProfileNavigationStack
}

export type ProfileNavAddThingsProps = StackScreenProps<ProfileNavigationStack, 'ProfileAddThings'>

所以我试图从 PlannerStack 导航到 ProfileStack，当我在 ProfileStack 中时，我想回到 PlannerStack。

像这样从 PlannerStack 转到 ProfileStack 没有问题：

navigation.navigate('Profile', {
    screen: 'ProfileAddThings',
    params: {
        service: 'myservice',
        from: 'myfrom',
    },
    initial: false,
})

所以那一刻我在屏幕上的ProfileStack 上ProfileAddThings。如果我阅读文档，PlannerStack 会保留它的历史记录，如果我点击 Planner 的底部标签按钮，我可以看到页面仍然是 PlannerDetails。但是，当我点击屏幕ProfileAddThings 的后退按钮时，我将返回ProfileHome。我试图用该代码覆盖屏幕ProfileAddThings 的 backButton 操作：

navigation.navigate('Planner', { screen: 'PlannerDetails' })

但我得到了错误：undefined is not an object (evaluating 'route.params.detail')

Detail是PlannerDetails屏幕的参数。

我真的不明白为什么这个参数是未定义的，因为 de PlannerStack 历史仍然存在。

有人已经从 React Native 中的嵌套导航返回？

谢谢

【问题讨论】：

标签： reactjs typescript react-native react-navigation react-navigation-v6

【解决方案1】：

您需要获取父导航器。您可以通过在当前屏幕中使用 getParent() 方法来做到这一点。会是这样的：

let parent = navigation.getParent(); // This will assing PlannerStack to the parent variable.

那么你应该使用路由名称调用导航方法

parent.navigate('PlannerDetails');

路线历史，从屏幕注册孔组件（在您的情况下为 PlannerStack），在您的 PlannerStack 中，初始路由可能是 ProfileHome，这就是您使用后退按钮时到达那里的原因。

【讨论】：