使用 Expo Router 创建页面

了解 Expo Router 使用的基于文件的路由约定。

当在 app 目录下创建一个文件时，它会自动成为 app 中的一个路由。例如，以下文件将创建以下路由：

¥When a file is created in the app directory, it automatically becomes a route in the app. For example, the following files will create the following routes:

app

index.tsxmatches '/'

home.tsxmatches '/home'

[user].tsxmatches dynamic paths like '/expo' or '/evanbacon'

settings

index.tsxmatches '/settings'

页面

¥Pages

页面是通过从应用目录中的文件导出 React 组件作为默认值来定义的。从中导出的文件必须使用 .js、.jsx、.tsx、.ts 扩展名之一。

¥Pages are defined by exporting a React component as the default value from a file in the app directory. The file they are exported from must use one of the .js, .jsx, .tsx, .ts extensions.

例如，在项目中创建 app 目录，然后在其中创建一个文件 index.tsx。然后，添加以下代码片段：

¥For example, create the app directory in your project and then create a file index.tsx inside it. Then, add the following snippet:

使用 React Native 的 <Text> 组件在任何平台上渲染文本。

¥Render text on any platform with the <Text> component from React Native.

app/index.tsx

import { Text } from 'react-native';

export default function Page() {
  return <Text>Top-level page</Text>;
}

或者，你可以编写仅限 Web 的 React 组件，例如 <div>、<p> 等。但是，这些不会在原生平台上渲染。

¥Alternatively, you can write web-only React components such as <div>, <p>, and so on. However, these won't render on native platforms.

app/index.tsx

export default function Page() {
  return <p>Top-level page</p>;
}

上面的例子匹配了应用和浏览器中的 / 路由。名为 index 的文件与父目录匹配，并且不添加路径段。例如，app/settings/index.tsx 匹配应用中的 /settings。

¥The above example matches the / route in the app and the browser. Files named index match the parent directory and do not add a path segment. For example, app/settings/index.tsx matches /settings in the app.

平台特定扩展

¥Platform specific extensions

在 Expo Router 3.5.x 中添加了平台特定的扩展。如果你使用的是旧版本的库，请按照特定于平台的模块中的说明进行操作。

仅当非平台版本也存在时，Metro 打包器的特定于平台的扩展（例如，.ios.tsx 或 .native.tsx）才在应用目录中受支持。这确保了路由在深度链接的跨平台上是通用的。

¥Metro bundler's platform-specific extensions (for example, .ios.tsx or .native.tsx) are supported in the app directory only if a non-platform version also exists. This ensures that routes are universal across platforms for deep linking.

考虑以下项目结构：

¥Consider the following project structure:

app

_layout.tsx

_layout.web.tsx

index.tsx

about.tsx

about.web.tsx

在上面的文件结构中：

¥In the above file structure:

_layout.web.tsx 文件用作 Web 上的布局，_layout.tsx 用于所有其他平台。

¥_layout.web.tsx file is used as a layout on the web and _layout.tsx is used on all other platforms.
index.tsx 文件用作所有平台的主页。

¥index.tsx file is used as the home page for all platforms.
about.web.tsx 文件用作 Web 的关于页面，about.tsx 文件用于所有其他平台。

¥about.web.tsx file is used as the about page for the web, and the about.tsx file is used on all other platforms.

需要提供没有平台特定扩展的路由文件以确保每个平台都有默认实现。

动态路由

¥Dynamic routes

动态路由与给定网段级别的任何不匹配路径相匹配。

¥Dynamic routes match any unmatched path at a given segment level.

路由	匹配的网址
app/blog/[slug].tsx	`/blog/123`
app/blog/[...rest].tsx	`/blog/123/settings`

优先级高的路由会先于动态路由进行匹配。例如，/blog/bacon 将在 blog/[id].tsx 之前匹配 blog/bacon.tsx。

¥Routes with higher specificity will be matched before a dynamic route. For example, /blog/bacon will match blog/bacon.tsx before blog/[id].tsx.

可以使用剩余语法 (...) 在单个路由中匹配多个 slugs。例如，app/blog/[...id].tsx 匹配 /blog/123/settings。

¥Multiple slugs can be matched in a single route by using the rest syntax (...). For example, app/blog/[...id].tsx matches /blog/123/settings.

动态段可在页面组件中作为 React 规则进行访问。

¥Dynamic segments are accessible as route parameters in the page component.

app/blog/[slug].tsx

import { useLocalSearchParams } from 'expo-router';
import { Text } from 'react-native';

export default function Page() {
  const { slug } = useLocalSearchParams();

  return <Text>Blog post: {slug}</Text>;
}