未使用NavigationContainer却出现导航对象找不到错误求助

我这是第一个React Native项目，全程没用到NavigationContainer组件，但在App.js里引入自定义的Header组件后，弹出错误：

Error: Couldn't find a navigation object. Is your component inside NavigationContainer?

相关代码及依赖配置如下：

Header组件代码（project\components\Header.js） #

const Header = () => {
  return (
    <View>
      <Text>Header</Text>
    </View>
  );
};

export default Header;

App.js代码 #

import { StatusBar } from "expo-status-bar";
import { StyleSheet, Text, View } from "react-native";
import Header from "./components/Header";

export default function App() {
  return (
    <View>
      <Text>Open up App.js to start working on your app!</Text>
      {/* <StatusBar style="auto" /> */}
      <Header />
    </View>
  );
}

package.json依赖配置 #

{
  "name": "jobsearch",
  "version": "1.0.0",
  "main": "index.js",
  "scripts": {
    "start": "expo start --dev-client",
    "android": "expo run:android",
    "ios": "expo run:ios",
    "web": "expo start --web"
  },
  "dependencies": {
    "@rneui/themed": "^4.0.0-rc.7",
    "axios": "^1.3.4",
    "expo": "~48.0.10",
    "expo-router": "^1.4.3",
    "expo-splash-screen": "~0.18.1",
    "expo-status-bar": "~1.4.4",
    "react": "18.2.0",
    "react-native": "0.71.6",
    "react-native-dotenv": "^3.4.8",
    "react-native-vector-icons": "^9.2.0"
  },
  "devDependencies": {
    "@babel/core": "^7.20.0"
  },
  "private": true
}

问题出在你安装的expo-router依赖上——expo-router默认要求应用必须在路由容器（比如NavigationContainer或expo-router提供的Stack/Slot）内部运行，哪怕你没主动使用导航功能，只要安装了这个包，它的底层逻辑就会自动查找导航上下文。

有两种解决方式：

• 不需要路由功能：直接卸载expo-router，执行命令：

  npm uninstall expo-router
  

  卸载后重启项目，错误即可消失。
• 后续需要使用路由：按照expo-router的规则初始化路由结构：
  1. 在项目根目录创建app文件夹，将App.js的内容迁移到app/index.js中；
  2. 在app文件夹下创建_layout.js文件，添加路由容器代码：

     import { Stack } from "expo-router";
     
     export default function RootLayout() {
       return <Stack />;
     }
     

  完成后expo-router就能找到导航上下文，错误会被解决。

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