使用@react-navigation/native v^6.1.6遇ReferenceError: Theme未定义求助

问题重现 #

使用@react-navigation/native@^6.1.6时触发ReferenceError: Theme is not defined，回滚版本无效，相关代码如下：

MainNavigator代码

export const MainNavigator = () => {
  return (
    <Stack.Navigator
      initialRouteName={SplashScreen}
      screenOptions={{
        headerShown: false,
        gestureEnabled: false,
      }}>
      <Stack.Screen name="Splash" component={SplashScreen} />
      <Stack.Screen name="DetailsScreen" component={DetailsScreen} />
      <Stack.Screen name="SignUpScreen" component={SignUpScreen} />
      <Stack.Screen name="SignInScreen" component={SignInScreen} />
      <Stack.Screen name="ProfileScreen" component={ProfileScreen} />
      <Stack.Screen name="FixturesScreen" component={FixturesScreen} />
      <Stack.Screen name="ErrorScreen" component={ErrorScreen} />
      <Stack.Screen name="SettingsScreen" component={SettingsScreen} />
      <Stack.Screen name="ChangePassword" component={ChangePassword} />
      <Stack.Screen name="ChangeName" component={ChangeName} />
      <Stack.Screen name="UserProfilesScreen" component={UserProfilesScreen} />
    </Stack.Navigator>
  );
};

App.js代码

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

function App() {
  return (
    <Provider store={store}>
      <NavigationContainer>
        <MainNavigator />
      </NavigationContainer>
    </Provider>
  );
}

解决方法 #

1. 修复Stack导航器的导入与初始化

代码中使用了<Stack.Navigator>但未正确导入和创建Stack实例，这是触发错误的核心原因之一。修改MainNavigator代码：

// 导入Stack导航器
import { createStackNavigator } from '@react-navigation/stack';
// 导入所有用到的屏幕组件（示例路径，需替换为实际路径）
import SplashScreen from './src/screens/SplashScreen';
import DetailsScreen from './src/screens/DetailsScreen';
// ...其他屏幕组件的导入

// 创建Stack实例
const Stack = createStackNavigator();

export const MainNavigator = () => {
  return (
    <Stack.Navigator
      // 注意：initialRouteName必须传入路由名称字符串，而非组件本身
      initialRouteName="Splash"
      screenOptions={{
        headerShown: false,
        gestureEnabled: false,
      }}>
      <Stack.Screen name="Splash" component={SplashScreen} />
      {/* 其他屏幕保持不变 */}
    </Stack.Navigator>
  );
};

2. 确保安装所有必要依赖

确认已安装@react-navigation/stack，未安装则执行：

npm install @react-navigation/stack
# 或 yarn add @react-navigation/stack

同时确保React Navigation核心依赖齐全：

npm install @react-navigation/native react-native-screens react-native-safe-area-context

3. 清理依赖缓存（若上述步骤无效）

删除现有依赖文件后重新安装：

rm -rf node_modules package-lock.json
npm install

错误原因说明 #

React Navigation的Stack导航器内部依赖主题上下文渲染组件，当Stack实例未正确初始化（未导入就使用），或initialRouteName传入错误类型（组件而非路由名字符串）时，会导致内部逻辑异常，进而触发Theme is not defined的引用错误。

内容的提问来源于stack exchange，提问作者Jason Byron Beedle