从Expo Router迁移至React Navigation遇路由fallback问题求助

问题背景 #

已从Expo Router文件路由迁移到React Navigation，移除了原app/文件夹并搭建了src/下的导航与屏幕结构，但运行应用时仍出现Expo Router的fallback默认页面，未加载自定义的React Navigation配置。

现有核心配置：

• 新文件夹结构：

  src/
  ├── navigation/
  │   ├── DrawerNavigator.tsx
  │   ├── TabNavigator.tsx
  ├── screens/
  │   ├── drawer/HomeScreen.tsx
  │   ├── drawer/ModalScreen.tsx
  │   ├── tabs/TabOne.tsx
  │   ├── tabs/TabTwo.tsx
  │   ├── NotFoundScreen.tsx
  ├── App.tsx
  

• 原DrawerNavigator.tsx已绑定NavigationContainer与Drawer导航，但未正确禁用Expo Router的自动启动机制。

解决步骤 #

1. 禁用Expo Router的自动配置 #

Expo默认自动启用Router功能，即使移除app/文件夹也会触发fallback页面。需在app.json或app.config.js中明确禁用：

{
  "expo": {
    "router": {
      "enabled": false
    },
    // 其他原有配置
  }
}

2. 确保App.tsx正确加载React Navigation #

修改项目根目录下的App.tsx，直接引入自定义导航容器，替代默认的Expo Router入口：

import React from 'react';
import DrawerNavigator from './src/navigation/DrawerNavigator';

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

3. 修正导航结构匹配原Expo Router功能 #

原Expo Router的模态页为全局层级（非嵌套在Drawer中），同时需处理404页面。调整DrawerNavigator.tsx结构：

import React from 'react';
import { createDrawerNavigator } from '@react-navigation/drawer';
import { createStackNavigator } from '@react-navigation/stack';
import { NavigationContainer } from '@react-navigation/native';
import HomeScreen from '../screens/drawer/HomeScreen';
import TabNavigator from './TabNavigator';
import ModalScreen from '../screens/drawer/ModalScreen';
import NotFoundScreen from '../screens/NotFoundScreen';

const Drawer = createDrawerNavigator();
const Stack = createStackNavigator();

// 嵌套Drawer与Tab导航
function MainDrawer() {
  return (
    <Drawer.Navigator initialRouteName="Home">
      <Drawer.Screen name="Home" component={HomeScreen} />
      <Drawer.Screen name="Tabs" component={TabNavigator} />
    </Drawer.Navigator>
  );
}

const DrawerNavigator = () => (
  <NavigationContainer>
    <Stack.Navigator screenOptions={{ headerShown: false }}>
      {/* 主导航栈 */}
      <Stack.Screen name="Main" component={MainDrawer} />
      {/* 全局模态页 */}
      <Stack.Screen 
        name="Modal" 
        component={ModalScreen} 
        options={{ presentation: 'modal' }} 
      />
      {/* 404页面 */}
      <Stack.Screen name="NotFound" component={NotFoundScreen} />
    </Stack.Navigator>
  </NavigationContainer>
);

export default DrawerNavigator;

4. 清除Expo缓存 #

运行以下命令清除旧配置缓存，确保新导航配置生效：

npx expo start --clear

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