React Native导航报React.createElement type is invalid，导入导出正常如何解决

问题排查与解决方案 #

你遇到的报错本质是导入的组件实际为无效值，排查出3个明确问题，按顺序修改即可解决：

1. 缺失createStackNavigator导入（核心问题）

你的homeStack.js中只引入了createAppContainer，但没有导入导航栈创建函数createStackNavigator，导致调用该函数时返回undefined，最终导出的导航容器为无效对象触发报错。
如果你使用的是react-navigation 4.x版本，操作步骤如下：

• 首先安装缺失依赖：

npm install react-navigation-stack @react-native-community/masked-view react-native-screens react-native-safe-area-context react-native-gesture-handler react-native-reanimated

• 修改homeStack.js导入语句，新增createStackNavigator的导入：

import {createAppContainer} from "react-navigation";
import { createStackNavigator } from 'react-navigation-stack'; // 新增这一行

// 后续代码保持不变
import HomeScreen from "./Screens/homescreen";
import CreatePortfolio from "./Screens/createPortfolio";
import ContactUs from "./Screens/ContactUs";
import Portfolio from "./Screens/Portfolio";

const screens = {
    Home: { screen: HomeScreen },
    CreatePortfolio: { screen: CreatePortfolio },
    ContactUs: { screen: ContactUs },
    Portfolio: { screen: Portfolio },
}

const HomeStack = createStackNavigator(screens);
export default createAppContainer(HomeStack);

2. 自定义组件命名不符合规范

React要求所有自定义组件必须以大写字母开头，你目前的页面组件函数名为小写开头的homescreen，会被React识别为原生HTML标签，导致类型错误。
所有页面组件都需要修改函数名首字母为大写，示例如下：

import React from "react";
import { StyleSheet, View, Text } from 'react-native';
import {GlobalStyles} from "../styles";

// 函数名首字母改为大写
export default function HomeScreen() {
    return(
        <View style={GlobalStyles.container}>
            <Text style={GlobalStyles.titleText}>Homescreen</Text>
        </View>
    );
}

其余CreatePortfolio、ContactUs等组件都遵循同一规则修改即可。

3. 路径大小写匹配检查

React Native在iOS等系统中对文件路径大小写敏感，需要确认Screens文件夹下的文件名和导入时的路径大小写完全匹配，例如文件名是homescreen.js就对应导入./Screens/homescreen，如果文件名是HomeScreen.js则需要对应调整导入路径的大小写，避免大小写不匹配导致导入值为undefined。

修改完成后执行npx react-native start --reset-cache清理缓存重启项目，即可解决该报错。

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