React Native中创建Switch Navigator时报错：(0 , _reactNavigation.createSwitchNavigator) is not a function

这个报错的核心原因是你混用了React Navigation不同版本的API：你导入了v5+版本的NavigationContainer，但同时又在使用v4及以下版本的createSwitchNavigator和createAppContainer——这两个方法在React Navigation v5+中已经被废弃了，自然会抛出“不是函数”的错误。

第一步：清理旧依赖并安装正确的导航库 #

先卸载旧版的react-navigation，然后安装v5+版本的核心依赖和栈导航组件：

# 卸载旧版依赖
npm uninstall react-navigation

# 安装v5+核心库和栈导航
npm install @react-navigation/native @react-navigation/native-stack

# 安装必要的原生依赖（React Native 0.60+会自动link）
npm install react-native-screens react-native-safe-area-context

第二步：修改App.js代码适配v5+ API #

React Navigation v5+不再使用createSwitchNavigator，而是用createNativeStackNavigator结合NavigationContainer来实现页面切换，同时可以通过配置来模拟Switch Navigator无导航栏、不可回退的特性：

import React from 'react';
import { NavigationContainer } from '@react-navigation/native';
import { createNativeStackNavigator } from '@react-navigation/native-stack';
import Loading from './Screens/Loading';
import Login from './Screens/Login';
import TabNavigator from './Navigation/TabNavigator';

const Stack = createNativeStackNavigator();

export default function App() {
  return (
    <NavigationContainer>
      <Stack.Navigator 
        initialRouteName="LoadingScreen"
        screenOptions={{ headerShown: false }} // 隐藏所有页面的导航栏，模拟Switch效果
      >
        <Stack.Screen name="LoadingScreen" component={Loading} />
        <Stack.Screen name="LoginScreen" component={Login} />
        {/* 把TabNavigator作为主页容器，替代原来的HomeScreen */}
        <Stack.Screen name="HomeScreen" component={TabNavigator} />
      </Stack.Navigator>
    </NavigationContainer>
  );
}

额外注意：同步升级TabNavigator（如果它是旧版的） #

如果你的TabNavigator是基于旧版react-navigation写的，也需要同步升级到v5+的底部导航API：

// ./Navigation/TabNavigator.js
import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';
import Home from '../Screens/Home';
// 导入其他Tab页面

const Tab = createBottomTabNavigator();

export default function TabNavigator() {
  return (
    <Tab.Navigator>
      <Tab.Screen name="Home" component={Home} />
      {/* 添加其他Tab项 */}
    </Tab.Navigator>
  );
}

为什么这样解决？ #

React Navigation v5+彻底重构了API，改用声明式的组件写法：

• NavigationContainer是所有导航组件的根容器，必须包裹在最外层
• createNativeStackNavigator替代了旧版的createSwitchNavigator和createStackNavigator，通过screenOptions可以统一配置页面样式
• 如果你需要实现Switch Navigator那种“不可回退”的跳转逻辑，可以在页面中使用navigation.replace()替代navigation.navigate()，或者通过路由重置来实现

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