expo-router

依赖

npx expo install expo-router

会自动在app.json的expo.plugin中添加

手动将package.json中的main替换为：expo-router/entry

基本

文件即路由

• app下的所有目录和文件会自动解析为路由

• 存在一个目录下有_layout时，整个目录为一个路由

┣ app/
┃ ┣ (tabs)/
┃ ┃ ┣ _layout.js
┃ ┃ ┣ home.js
┃ ┃ ┗ my.js
┃ ┣ profile/
┃ ┃ ┗ setting.js
┃ ┣ user/
┃ ┃ ┗ [username].js
┃ ┣ page2/
┃ ┃ ┗ _layout.js
┃ ┃ ┗ page2sub1.js
┃ ┃ ┗ page2sub2.js
┃ ┣ page3/
┃ ┃ ┗ index.js
┃ ┃ ┗ page3sub1.js
┃ ┗ page1.js

• (tabs)，用括号的表示路由组，其中的路由虽然没有直接存在于app目录，但是在导航时不用加上目录名称。此处的(tabs)/my用/my导航。此处的(tabs)是tabbar元素，其中index是第一幕（首页），所以导航到index时不能填index，填"/"即可

• /user/[username].js，方括号表示动态路由，可以通过/user/zhangsan、/user/wangwu、....等导航到此处，在页面内使用useLocalSearchParams获取传递的参数

• /page2，通过/page2、/page2/page2sub1、/page2/page2sub2访问的都是/page2/_layout.js，因为_layout是布局容器

• page3目录共有二个路由，/page3、page3都指向/page3/index.js。和/page3/page3sub1

• 还有一些简单路由：page1、/profile/setting

路由器符号官方文档：https://docs.expo.dev/router/basics/notation/#square-brackets

/src/app

文档页面：https://docs.expo.dev/router/basics/core-concepts/#5-non-navigation-components-live-outside-of-app-directory

也可以放在/src/app中，非路由文件如component、utils等也放在src中，根目录结构更清晰

自定义路由文件夹

官方称不建议这样做

// app.json
{
  "expo": {
    //...其它配置
	"plugin": [
		[
			"expo-router", 
			{
				"root": "./src/routes"
			}
		]
	]
  }
}

返回<Stack />

┣ app/
┃ ┣ page2/
┃ ┃ ┣ page2sub1.js
┃ ┃ ┣ page2sub2.js
┃ ┃ ┗ _layout.js

_layout.js代码：

import { Stack } from "expo-router";

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

此时page2目录不再是一个单独的路由，可以通过/page2/page2sub1、/page2/page2sub2或/page2（指向的是自动解析的第一个文件，此处表指向的是page2sub1）

这样写可以为多个路由统一配置一些内容