如何将现有React Native Navigation应用迁移至Expo Router？

1. 做好前置准备 #

• 先备份原项目的AppNavigator文件夹，防止误操作丢失原有配置
• 安装Expo Router相关依赖：

  npx expo install expo-router react-native-safe-area-context react-native-screens expo-linking expo-constants expo-status-bar
  

• 在项目根目录初始化Expo Router基础结构：

  npx expo-router init
  

  初始化时选择保留现有文件，避免覆盖原项目代码

2. 拆解原AppNavigator/index.tsx的路由结构 #

先把原文件里的核心配置梳理清楚：

• 区分当前是Tab导航、Stack导航还是混合嵌套结构
• 列出每个路由对应的屏幕组件、导航选项（比如标题、自定义样式、跳转逻辑）
• 标记出带动态参数的路由（比如Profile/:id这类需要传参的页面）

3. 映射到Expo Router的文件系统路由 #

Expo Router靠文件夹/文件结构定义路由，对应关系大致如下：

• 原Tab.Navigator → 创建app/(tabs)文件夹，每个Tab对应一个文件（比如home.tsx、profile.tsx），并在(tabs)/_layout.tsx中配置Tab导航的样式和选项
• 原Stack.Navigator → 全局栈导航在app/_layout.tsx里用Stack组件配置；嵌套栈则在对应子文件夹下创建_layout.tsx（比如app/(tabs)/profile/_layout.tsx）
• 带参数的路由 → 用方括号命名文件/文件夹，比如app/(tabs)/profile/[id].tsx对应原Profile路由带id参数的场景

4. 迁移导航逻辑与组件 #

• 移除原NavigationContainer：Expo Router会自动处理根容器，只需要在app/_layout.tsx中配置顶层导航即可
• 迁移屏幕组件：把原项目的屏幕组件（比如HomeScreen）移动到对应路由路径下，比如app/(tabs)/index.tsx就是首页路由对应的组件文件
• 替换跳转逻辑：原navigation.navigate('Profile', { id: 1 })换成useRouter钩子实现：

  import { useRouter } from 'expo-router';
  
  const router = useRouter();
  // 跳转带参数的路由
  router.push('/profile/1');
  

• 替换参数获取：原route.params.id换成useLocalSearchParams钩子：

  import { useLocalSearchParams } from 'expo-router';
  
  const { id } = useLocalSearchParams();
  

5. 迁移导航样式与配置 #

• 原screenOptions（比如导航栏标题、背景色）：在对应_layout.tsx的导航组件里配置，比如全局Stack的样式写在app/_layout.tsx：

  import { Stack } from 'expo-router';
  
  export default function RootLayout() {
    return (
      <Stack
        screenOptions={{
          headerStyle: { backgroundColor: '#fff' },
          headerTitleStyle: { fontSize: 18 },
        }}
      />
    );
  }
  

• 自定义导航栏：如果原项目有自定义头部，可以在对应屏幕的路由配置里用header属性覆盖，或者直接隐藏默认导航栏后自行编写：

  // 在_layout.tsx里隐藏默认头部
  <Stack.Screen name="profile/[id]" options={{ headerShown: false }} />
  

6. 逐步测试，避免全量迁移 #

• 先迁移1-2个简单路由（比如首页+一个详情页），验证跳转、参数传递、导航样式是否正常
• 再逐步处理复杂路由（比如嵌套导航、抽屉导航）
• 遇到样式或逻辑问题时，对比原AppNavigator的配置逐一调整

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