React Native嵌套Tab与Stack导航时页面跳转报错问题排查

我帮你梳理下当前跳转报错的核心问题，其实就是导航器的名称匹配和嵌套层级没搞对，咱们一步步来看：

先分析两个报错的原因 #

1. 直接调用navigation.navigate('Contacts')报错：
   当用户已登录（isAuth为true）时，你的根导航是Tab.Navigator，而Contacts页面是嵌套在HomeStackScreen这个Stack导航器里面的，属于Tab导航下的子导航器页面，直接在根导航里找Contacts肯定找不到，必须指定外层的Tab导航项。

2. 调用navigation.navigate('HomeStack', {screen: 'Contacts'})报错：
   你跳转时用的HomeStack这个名称根本不存在！看你的Router.js代码，已登录状态下的Tab导航里，对应HomeStackScreen的那个Tab项，你给它起的名字是Contacts1（不是HomeStack），导航器只会识别你定义的name属性，所以自然找不到这个导航器。

具体解决方法 #

方法一：用现有Tab项名称跳转

既然你给对应HomeStackScreen的Tab项命名为Contacts1，那正确的嵌套跳转写法应该是：

navigation.navigate('Contacts1', { screen: 'Contacts' })

方法二：优化Tab项名称（更推荐）

为了避免混淆，建议把Tab项的name改成更直观的HomeStack，和你的组件名对应，以后维护也不容易出错：
修改Router.js里的Tab导航部分：

<Tab.Screen name="HomeStack"  // 将原来的Contacts1替换为HomeStack
            component={HomeStackScreen}
            screenOptions={{ headerShown: false }}
            options={{
                tabBarIcon: ({ focused }) => (
                    <Image
                        source={accountTab}
                        resizeMode='contain'
                        style={{
                            tintColor: focused ? '#fff' : '#748c94',
                        }}
                    />
                ),
            }}
/>

修改后，你原来的跳转写法就能正常工作了：

navigation.navigate('HomeStack', { screen: 'Contacts' })

额外注意点 #

当用户未登录时，根导航是HomeStackScreen，这时候直接调用navigation.navigate('Contacts')是可行的；但用户登录后切换到Tab导航，就必须遵循嵌套导航的跳转规则——先指定外层导航的screen名称，再指定内层导航的目标页面。

备注：内容来源于stack exchange，提问作者OzturkS