React Native切换Expo Router开发构建后组件类型无效错误求助

核心错误原因分析 #

你遇到的 Element type is invalid 错误，本质是代码中尝试渲染一个未定义的组件，大概率由导入/导出不匹配或组件引用错误导致。以下是具体问题和修复步骤：

1. FocusAwareStatusBar 组件未正确导出/导入 #

Home 组件中导入了 FocusAwareStatusBar 来自 ./_layout，但提供的 TabLayout（即 _layout.js）代码中并未导出该组件，直接导致 FocusAwareStatusBar 为 undefined，渲染时触发错误。

修复方案：

• 若不需要自定义状态栏，直接删除 Home 组件中的相关代码：

  import { FocusAwareStatusBar } from "./_layout";
  // 同时删除 return 中的 <FocusAwareStatusBar hidden backgroundColor="#ecf0f1" /> 行
  

• 若需要自定义状态栏，在 _layout.js 中正确导出该组件：

  // 在 TabLayout 文件中添加导出
  import { StatusBar } from "react-native";
  
  export function FocusAwareStatusBar(props) {
    // 可根据需求添加聚焦状态逻辑
    return <StatusBar {...props} />;
  }
  

2. Expo Router 路由名称与文件名称不匹配 #

Expo Router 采用文件系统路由，屏幕名称必须与对应文件名称完全一致（区分大小写）。你的 TabLayout 中定义了 name="Home"，但如果 Home 组件文件名为 home.js（小写），Expo Router 会找不到对应组件，导致渲染 undefined。

修复方案：
将 TabLayout 中的屏幕名称改为与文件名一致的小写：

<Tabs.Screen
  name="home" // 改为小写，匹配文件名称
  options={{
    title: 'Home',
    tabBarIcon: ({ color }) => <Home size={28} color={color} />,
  }}
/>

3. Lucide 图标使用错误 #

第二个 Tab 中使用 Home 图标却传入 name="cog" 属性——Home 图标组件不支持 name 属性，且这并非你需要的齿轮图标。

修复方案：
导入正确的齿轮图标并使用：

// 替换原导入语句
import { Home, Cog } from "lucide-react-native";

// 第二个 Tab 的图标改为 Cog
<Tabs.Screen
  name="index"
  options={{
    title: 'Index',
    tabBarIcon: ({ color }) => <Cog size={28} color={color} />,
  }}
/>

4. 额外检查：AsyncStorage 兼容性 #

切换到开发构建后，确保 @react-native-async-storage/async-storage 已正确配置，运行以下命令确认依赖：

npx expo install @react-native-async-storage/async-storage

总结 #

优先修复 FocusAwareStatusBar 未定义 和 路由名称不匹配 两个核心问题，它们是当前错误的主要诱因。完成修复后，重启开发服务器并重新构建项目即可正常运行。

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