React Native + Expo报错：Cannot convert undefined value to object

问题原因 #

你导入的react-navigation-stack是已过时的导航包，当前@react-navigation生态中，栈导航的正确依赖为@react-navigation/stack（或@react-navigation/native-stack），直接导入旧包会导致createStackNavigator为undefined，调用时触发“Cannot convert undefined value to object”错误。

修复步骤 #

1. 安装正确的栈导航依赖（未安装的话执行）：

npx expo install @react-navigation/stack react-native-gesture-handler react-native-reanimated

2. 修改App.js中的导入语句：
   将

import { createStackNavigator } from "react-navigation-stack";

替换为

import { createStackNavigator } from "@react-navigation/stack";

3. 确保@react-navigation/native与@react-navigation/stack版本范围一致，避免版本不兼容问题。

修复后的完整App.js代码 #

import { View } from "react-native";
import LoginPage from "./components/LoginPage";
import MainComponent from "./components/MainComponent";
import { NavigationContainer } from "@react-navigation/native";
import { createStackNavigator } from "@react-navigation/stack";

const App = () => {
  const Stack = createStackNavigator();

  return (
    <NavigationContainer>
      <Stack.Navigator>
        <Stack.Screen name="Login" component={LoginPage} />
      </Stack.Navigator>
    </NavigationContainer>
  );
};

export default App; 

注意：组件return中不能存在多个同级元素，你注释掉的<LoginPage/>若取消注释会引发新的语法错误，需保持return内只有一个根元素。

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