从React Navigation迁移至Expo Router的导航配置问题

用npx create-expo-app@latest projectName创建Expo应用时，出现Looks like you have nested a navigation container inside another..错误，已知是因为Expo默认已添加导航容器，无需手动添加。

现在要把原React Navigation的导航迁移到Expo Router，尝试用expo-router的<Stack>包裹原代码后无报错但页面空白，怀疑是navigationRef配置问题，或者不该再用createStackNavigator()，同时不清楚Expo Router中如何配置navigationRef。

原导航组件代码：

import { createStackNavigator } from '@react-navigation/stack';
import React, { useEffect } from 'react';
import name1 from './name1';
import name2 from './name2';
import { NavigationContainer } from '@react-navigation/native';
import { useSelector, useDispatch } from 'react-redux';
import { navigationRef } from './navigationRef';
import { Stack , useNavigation} from 'expo-router';


const Stackk = createStackNavigator();

export default function RootNavigator({ }) {

  return (

      <Stack >
     {/* <NavigationContainer ref={navigationRef} independent={true} > */}
      <Stackk.Navigator screenOptions={{ headerShown: false }}>
        <Stackk.Screen  name="name1" component={name1} />
        <Stackk.Screen  name="name2" component={name2} />
      </Stackk.Navigator>

    {/* </NavigationContainer> */}
     </Stack> 
  );
}

navigationRef文件代码：

import * as React from 'react';

export const navigationRef = React.createRef();

export function navigate(name, params) {
  navigationRef.current?.navigate(name, params);
}

1. 移除冗余的React Navigation栈代码 #

Expo Router基于文件系统路由工作，完全不需要手动创建createStackNavigator、Navigator/Screen这类组件，你之前用<Stack>包裹原React Navigation代码的方式是错误的，这也是页面空白的核心原因。

2. 按规则组织页面文件 #

• 在项目根目录创建app文件夹（Expo Router默认的路由根目录）
• 将name1.jsx和name2.jsx移动到app文件夹下，对应路由路径自动变为/name1和/name2
• 如果需要把name1设为首页，直接将其重命名为index.jsx，启动时会自动加载/路径的页面

3. 替换navigationRef实现全局导航 #

Expo Router不需要手动创建navigationRef，可以用内置的router对象实现全局导航：
创建navigationService.js文件：

import { router } from 'expo-router';

export function navigate(name, params) {
  router.push({ pathname: `/${name}`, params });
}

// 可选：添加其他常用导航方法
export function goBack() {
  router.back();
}

在需要全局导航的地方（比如Redux action里）直接导入这个文件的方法即可使用。

4. 统一配置栈导航（可选） #

如果需要给所有页面设置统一的导航栏规则（比如隐藏头部），在app/_layout.jsx中配置：

import { Stack } from 'expo-router';

export default function RootLayout() {
  return (
    <Stack screenOptions={{ headerShown: false }}>
      {/* 无需手动添加Screen，Expo Router会自动识别app文件夹下的页面 */}
    </Stack>
  );
}

5. 清理无用代码 #

• 删除原RootNavigator.js文件
• 删除navigationRef.js文件（已用navigationService.js替代）
• 卸载不再需要的依赖：npm uninstall @react-navigation/native @react-navigation/stack

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