如何解决React Native中StackNavigator不存在的ReferenceError错误

错误原因 #

你当前使用的是新版@react-navigation/native-stack导航库，但代码中仍在调用旧版导航库的StackNavigator组件——新版库已经移除了这个导出，改用createNativeStackNavigator()方法生成包含Navigator和Screen的导航器对象。

解决步骤 #

1. 替换代码中的导航写法 #

把代码里旧的StackNavigator用法替换为新版的API：

错误的旧写法（你可能还在使用）：

// 旧版库的写法，现在已废弃
import { StackNavigator } from 'react-navigation-stack';

const AppNavigator = StackNavigator({
  Home: { screen: HomeScreen },
  Details: { screen: DetailsScreen },
});

正确的新版写法：

import { NavigationContainer } from '@react-navigation/native';
import { createNativeStackNavigator } from '@react-navigation/native-stack';

// 创建导航器对象
const Stack = createNativeStackNavigator();

function App() {
  return (
    <NavigationContainer>
      <Stack.Navigator initialRouteName="Home">
        <Stack.Screen name="Home" component={HomeScreen} />
        <Stack.Screen name="Details" component={DetailsScreen} />
      </Stack.Navigator>
    </NavigationContainer>
  );
}

2. 检查并补全依赖 #

确保核心导航依赖已安装：

npm install @react-navigation/native

如果是Expo项目，还需要安装配套的原生依赖：

expo install react-native-screens react-native-safe-area-context

3. 清除缓存重启项目 #

缓存残留可能导致旧代码依然生效，执行以下命令重启项目：

# 普通React Native项目
npm start --reset-cache

# Expo项目
expo start -c

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