React Navigation 7RC基础示例出现Element type is invalid错误求助

你遇到的错误是因为React Navigation 7 RC版本对@react-navigation/native-stack的API做了重大破坏性变更，而官方文档的示例还没同步更新到最新规范。

具体变更点 #

React Navigation 7不再使用createNativeStackNavigator工厂函数生成导航器组件，而是直接提供命名导出的StackNavigator和StackScreen组件。你的代码仍沿用旧版API，导致Stack.Navigator和Stack.Screen实际为undefined，触发了组件类型无效的错误。

修改后的代码 #

// In App.js in a new project

import * as React from 'react';
import { View, Text } from 'react-native';
import { NavigationContainer } from '@react-navigation/native';
// 替换旧的导入方式
import { StackNavigator, StackScreen } from '@react-navigation/native-stack';

function HomeScreen() {
  return (
    <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
      <Text>Home Screen</Text>
    </View>
  );
}

// 不再需要调用createNativeStackNavigator
function RootStack() {
  return (
    <StackNavigator>
      <StackScreen name="Home" component={HomeScreen} />
    </StackNavigator>
  );
}

export default function App() {
  return (
    <NavigationContainer>
      <RootStack />
    </NavigationContainer>
  );
}

补充说明 #

RC版本属于预发布版本，API仍在快速迭代，官方文档的更新往往滞后于代码变更。如果需要稳定开发，建议暂时使用React Navigation 6.x正式版；若坚持尝鲜7 RC，可直接查看@react-navigation/native-stack包的源码或README获取最新API信息。

内容的提问来源于stack exchange，提问作者Gaylord.P