React Native中如何在App.js文件正确配置App容器实现登录跳转抽屉导航

问题核心原因 #

• 你混用了React Navigation 4.x的静态API（createStackNavigator/createSwitchNavigator/createAppContainer）和5.x/6.x的组件式API（<NavigationContainer>/<Drawer.Navigator>），两套API不能同时使用，下面以当前主流的6.x版本为标准给出修复方案。
• 你错误地将JSX代码直接作为参数传入了createStackNavigator方法，该方法仅接收路由配置对象作为入参，不需要包裹JSX标签。
• Drawer.Screen的component属性需要传入实际的页面组件实例，不能传空字符串。
• initialRouteName必须配置为你要默认展示的抽屉页面对应的name属性值。

前置依赖安装 #

先执行命令安装所有需要的依赖：

npm install @react-navigation/native @react-navigation/drawer @react-navigation/native-stack react-native-screens react-native-safe-area-context react-native-gesture-handler react-native-reanimated

修复后完整代码 #

// 顶部必须先引入手势处理依赖
import 'react-native-gesture-handler';
import { NavigationContainer } from '@react-navigation/native';
import { createNativeStackNavigator } from '@react-navigation/native-stack';
import { createDrawerNavigator } from '@react-navigation/drawer';
// 替换为你自己实际的页面组件路径
import AuthScreen from './src/screens/AuthScreen';
import HomeScreen from './src/screens/HomeScreen';
import ProfileScreen from './src/screens/ProfileScreen';
import SettingScreen from './src/screens/SettingScreen';

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

// 抽屉导航配置
function DrawerNavigator() {
  return (
    <Drawer.Navigator initialRouteName="Home">
      <Drawer.Screen name="Home" component={HomeScreen} options={{title: '首页'}} />
      <Drawer.Screen name="Profile" component={ProfileScreen} options={{title: '个人中心'}} />
      <Drawer.Screen name="Setting" component={SettingScreen} options={{title: '设置'}} />
    </Drawer.Navigator>
  );
}

function App() {
  // 后续可以结合状态管理工具（Redux/Context等）替换此处的登录状态判断
  const isLogin = false;

  return (
    <NavigationContainer>
      <Stack.Navigator screenOptions={{headerShown: false}}>
        {
          !isLogin ? (
            <Stack.Screen name="Auth" component={AuthScreen} />
          ) : (
            <Stack.Screen name="App" component={DrawerNavigator} />
          )
        }
      </Stack.Navigator>
    </NavigationContainer>
  );
}

export default App;

登录跳转说明 #

• 登录成功后修改isLogin的状态值，导航会自动切换到抽屉导航页面，无需手动跳转。
• 如果需要手动触发跳转，可在AuthScreen中调用navigation.navigate('App')直接跳转到抽屉首页。

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