React Native如何从深层组件调用未在抽屉/标签栏展示的嵌套导航屏幕

问题原因 #

你当前跳转报错的核心原因是ListStackScreen没有被注册到导航树中，导航器无法识别对应的路由名称，且你没有对新增路由做隐藏展示配置。

解决方案 #

步骤1：注册路由并隐藏视觉展示 #

将ListStackScreen注册到根抽屉导航中，通过配置drawerItemStyle隐藏抽屉菜单项，不会在抽屉导航栏展示：

// 主App.js的Drawer导航配置
<Drawer.Navigator>
  <Drawer.Screen name="HomeDrawer" component={MainTabScreen} />
  {/* 新增ListStackScreen注册配置 */}
  <Drawer.Screen 
    name="ListStackScreen" 
    component={ListStackScreen}
    options={{
      drawerItemStyle: { display: 'none' }
    }}
  />
</Drawer.Navigator>

如果需要将路由放在底部Tab导航中且不展示Tab项，可以给对应的Tab.Screen增加配置tabBarButton: () => null即可。

步骤2：修正跳转逻辑 #

useNavigation只要在NavigationContainer包裹的子组件范围内都可以正常使用，直接调用注册的路由名跳转即可：

import { useNavigation } from '@react-navigation/native';

function ListButton({ title }) {
  const navigation = useNavigation();
  return (
    <Button
      title={`${title} Total`}
      onPress={() => navigation.navigate('ListStackScreen')}
    />
  );
}

代码笔误修正 #

你提供的ListStackScreen代码中存在笔误，将ListStack.Navigator错写为NotificationsStack.Navigator，需要修正避免运行报错：

// 修正前
const ListStackScreen = ({navigation}) => (
  <NotificationsStack.Navigator ...>
  ...
// 修正后
const ListStackScreen = ({navigation}) => (
  <ListStack.Navigator ...>
  ...

内容的提问来源于stack exchange，提问作者Jayesh