Expo项目缺失app文件夹时，如何配置expo-router路由？

1. 初始化基础Expo项目（未创建则执行） #

如果还没有项目，先创建一个空白项目并进入目录：

npx create-expo-app@latest my-router-app --template blank
cd my-router-app

2. 安装expo-router相关依赖 #

执行以下命令完成依赖安装：

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

3. 创建路由核心目录与首页文件 #

• 在项目根目录新建app文件夹
• 在app文件夹内创建index.js作为默认首页路由，示例代码：

import { Text, View, StyleSheet } from 'react-native';

export default function Home() {
  return (
    <View style={styles.container}>
      <Text>首页</Text>
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
  },
});

4. 修改项目配置文件app.json #

更新expo字段内的配置，指定路由入口和深层链接标识：

{
  "expo": {
    "scheme": "myrouterapp",
    "main": "expo-router/entry",
    // 保留原有其他配置项
  }
}

5. 配置全局路由布局（可选但推荐） #

在app文件夹下创建_layout.js，用于统一管理路由结构，示例：

import { Stack } from 'expo-router';

export default function RootLayout() {
  return <Stack />;
}

6. 启动项目 #

执行启动命令验证配置：

npx expo start

完成以上步骤后，expo-router会自动根据app文件夹内的文件名生成对应路由，比如创建app/profile.js后，即可通过/profile路径访问该页面。

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