react-native中如何组合使用Drawer Navigator与Stack Navigator

问题原因 #

你当前仅配置了Drawer抽屉导航，路由表中仅注册了HomeScreen和Term&Condition两个页面，DetailPage没有被加入任何导航路由中，因此调用navigation.navigate('DetailPage')时无法匹配到对应路由触发报错。
你需要通过嵌套导航实现需求：在Drawer的Home分支下嵌套Stack栈导航，把HomeScreen和DetailPage都放到该栈导航中即可。

修改步骤 #

1. 修改App.js代码 #

修改后的完整代码如下：

import * as React from 'react';
import { Button, View } from 'react-native';
import { createDrawerNavigator } from '@react-navigation/drawer';
import { NavigationContainer } from '@react-navigation/native';
import { createStackNavigator } from '@react-navigation/stack';
import HomeScreen from './Screens/HomeScreen';
import DetailPage from './Screens/DetailPage';
import TermsCondition from './Screens/TermsCondition';

const Drawer = createDrawerNavigator();
const Stack = createStackNavigator();

// 定义Home分支的栈导航
function HomeStack() {
  return (
    <Stack.Navigator>
      {/* 按需配置header是否显示，不需要就设置headerShown: false */}
      <Stack.Screen 
        name="HomeScreen" 
        component={HomeScreen} 
        options={{headerShown: false}} 
      />
      <Stack.Screen 
        name="DetailPage" 
        component={DetailPage} 
      />
    </Stack.Navigator>
  )
}

export default function App() {
  return (
    <NavigationContainer>
      <Drawer.Navigator initialRouteName="Home">
        {/* 把原来的HomeScreen替换为HomeStack */}
        <Drawer.Screen name="Home" component={HomeStack} />
        <Drawer.Screen name="Term&Condition" component={TermsCondition} />
      </Drawer.Navigator>
    </NavigationContainer>
  );
}

2. 补充HomeScreen的导入（可选，避免遗漏报错） #

你当前的HomeScreen代码没有导入基础组件，建议补充导入：

import { TouchableOpacity, View, Text } from 'react-native';
export default function HomeScreen({ navigation }) {
    return (
        <TouchableOpacity onPress={() => navigation.navigate('DetailPage')}>
            <View style={{ flexDirection: 'row' }}>
                <Text style={{ fontSize: 50 }}>Click for Details Page</Text>
            </View>
        </TouchableOpacity>
    );
}

修改完成后，原抽屉导航的跳转逻辑不受影响，HomeScreen跳转详情页的逻辑也可以正常执行。

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