Expo应用创建Stack Navigator时出现undefined错误求助

这个错误的核心原因是你混用了新旧版本的React Navigation依赖：你安装了新版的@react-navigation/native，但导入了旧版的react-navigation-stack，两者API不兼容导致调用createStackNavigator()时出现参数错误。

修复步骤： #

1. 替换依赖包
   卸载旧的react-navigation-stack，安装新版栈导航依赖：

   npm uninstall react-navigation-stack
   npm install @react-navigation/stack
   

   或使用yarn：

   yarn remove react-navigation-stack
   yarn add @react-navigation/stack
   

2. 修正导入语句
   将旧导入替换为新版路径：

   // 替换前
   import { createStackNavigator } from 'react-navigation-stack';
   // 替换后
   import { createStackNavigator } from '@react-navigation/stack';
   

3. 移除错误的style属性
   Stack.Screen组件不支持style属性，需将容器样式移到HomeScreen的内部View上，或通过Stack.Navigator的screenOptions统一配置。

修正后的完整代码： #

import { StatusBar } from 'expo-status-bar';
import React from 'react';
import { StyleSheet, Text, View } from 'react-native';
import { Home } from './screens/homepage/home';
import { useFonts } from 'expo-font';
import { NavigationContainer } from '@react-navigation/native';
import { createStackNavigator } from '@react-navigation/stack';

export default function App() {
  function HomeScreen() {
    return (
      <View style={styles.container}>
        <Text>Hello</Text>
      </View>
    )
  }

  const Stack = createStackNavigator();

  let [fontsLoaded] = useFonts({
    'Main': require('./assets/century.ttf'),
    'Main-Bold': require('./assets/century-bold.ttf')
  });
  
  if (!fontsLoaded) {
    return <Text>Waiting...........</Text>
  }

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

const styles = StyleSheet.create({
  container: {  
    height:'100%',
    backgroundColor:'#141F2B',
  },
});

如果需要给所有页面统一设置样式，可使用Stack.Navigator的screenOptions：

<Stack.Navigator
  screenOptions={{
    contentStyle: { backgroundColor: '#141F2B', flex: 1 }
  }}
>
  <Stack.Screen name="Home" component={HomeScreen} />
</Stack.Navigator>

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