Expo 路由常见问题解答

有关 Expo Router 的常见问题列表。

缺少后退按钮

¥Missing back button

如果你设置了一个模式或另一个预计有后退按钮的屏幕，那么你需要将 unstable_settings 添加到路由的布局中，以确保配置初始路由。初始路由对于移动应用来说有些独特，因此在系统中显得很笨拙 - 有待改进。

¥If you set up a modal or another screen that is expected to have a back button, then you'll need to add unstable_settings to the route's layout to ensure the initial route is configured. Initial routes are somewhat unique to mobile apps and therefore fit awkwardly in the system — improvements pending.

export const unstable_settings = {
  initialRouteName: 'index',
};

Expo Router 对比 Expo 对比 React Native CLI

¥Expo Router versus Expo versus React Native CLI

从历史上看，React Native 对于如何构建应用没有规定，这类似于在没有现代 Web 框架的情况下使用 React。Expo Router 是 React Native 的一个有态度的框架，类似于 Remix 和 Next.js 是纯 Web React 的有态度的框架。

¥Historically, React Native has been non prescriptive about how apps should be built, this is similar to using React without a modern web framework. Expo Router is an opinionated framework for React Native, similar to how Remix and Next.js are opinionated frameworks for web-only React.

Expo Router 旨在为每个人带来最好的架构模式，以确保 React Native 得到充分利用。例如，Expo Router 的 异步路由 功能可以为每个人提供惰性打包。此前，惰性打包仅在 Meta 中用于构建 Facebook 应用。

¥Expo Router is designed to bring the best architectural patterns to everyone, to ensure React Native is leveraged to its fullest. For example, Expo Router's Async Routes feature enables lazy bundling for everyone. Previously, lazy bundling was only used at Meta to build the Facebook app.

我可以在我的 React Native 应用中使用 Expo Router 吗？

¥Can I use Expo Router in my React Native app?

是的，Expo Router 是通用 React Native 应用的框架。由于路由和打包器之间的深层连接，Expo Router 仅在带有 Metro 的 Expo CLI 项目中可用。幸运的是，你也可以在任何 React Native 项目中使用 Expo CLI！

¥Yes, Expo Router is the framework for universal React Native apps. Due to the deep connection between the router and the bundler, Expo Router is only available in Expo CLI projects, with Metro. Luckily, you can use Expo CLI in any React Native project too!

基于文件的路由有哪些好处？

¥What are the benefits of file-based routing?

1. 文件系统是一个众所周知且易于理解的概念。更简单的思维模型可以更轻松地教育新团队成员并扩展你的应用。

   ¥The file system is a well-known and well-understood concept. The simpler mental model makes it easier to educate new team members and scale your application.

2. 吸引新用户的最快方法是让他们打开通用链接，根据他们是否安装了应用，将应用或网站打开到正确的屏幕。这项技术非常高级，通常只有有能力在平台之间建立和维护平价的大公司才能使用。但借助 Expo 基于文件的路由，你可以立即使用此功能！

   ¥The fastest way to onboard new users is by having them open a universal link that opens the app or website to the correct screen depending on if they have the app installed or not. This technique is so advanced that it's usually only available to large companies that can afford to make and maintain the parity between platforms. But with Expo's file-based routing, you can have this feature out of the box!

3. 重构更容易进行，因为你可以移动文件而无需更新任何导入或路由组件。

   ¥Refactoring is easier to do because you can move files around without having to update any imports or routing components.

4. Expo Router 能够自动静态键入路由。这可确保你只能链接到有效的路由，而不能链接到不存在的路由。类型化路由还可以改进重构，因为如果链接损坏，你将收到类型错误。

   ¥Expo Router has the ability to statically type routes automatically. This ensures you can only link to valid routes and that you can't link to a route that doesn't exist. Typed Routes also improve refactoring as you'll get type errors if links are broken.

5. 异步路由（打包包分割）提高了开发速度，尤其是在大型项目中。它们还使升级变得更容易，因为错误被隔离到单个路径，这意味着你可以逐页增量更新或重构应用，而不是一次性更新或重构应用（传统的 React Native）。

   ¥Async Routes (bundle splitting) improve development speed, especially in larger projects. They also make upgrades easier as errors are isolated to a single route, meaning you can incrementally update or refactor your app page-by-page rather than all at once (traditional React Native).

6. 深层链接对于每个页面始终有效。这使得共享应用中任何内容的链接成为可能，这对于推广你的应用、收集错误报告、E2E 测试、自动屏幕截图等非常有用。

   ¥Deep links always work, for every page. This makes it possible to share links to any content in the app, which is great for promoting your app, collecting bug reports, E2E testing, automating screenshots, and so on.

7. Expo Head 使用自动链接来实现深度原生集成。快速注释、Handoff、Siri 上下文和通用链接等功能仅需要配置设置，无需更改代码。这可以实现与用户所拥有的整个智能设备生态系统的完美垂直集成，从而带来只有通用应用（网络⇄原生）才能实现的用户体验类型。

   ¥Expo Head uses automatic links to enable deep-native integration. Features like Quick Notes, Handoff, Siri context, and universal links only require configuration setup, no code changes. This enables perfect vertical integration with the entire ecosystem of smart devices that a user has, leading to the types of user experiences that are only possible with universal apps (web ⇄ native).

8. Expo Router 能够在网络上自动静态渲染每个页面，从而实现真正的 SEO 和应用内容的完全可发现性。这仅是由于基于文件的约定才可能实现的。

   ¥Expo Router has the ability to statically render each page automatically on the web, enabling real SEO and full discoverability of your app's content. This is only possible because of the file-based convention.

9. 当你的应用遵循已知约定时，Expo CLI 可以推断出有关应用的大量信息。例如，我们可以实现每个路由的自动打包分割，或者自动为你的网站生成站点地图。当你的应用只有一个入口点时，这是不可能的。

   ¥Expo CLI can infer a lot of information about your application when it follows a known convention. For example, we could implement automatic bundle splitting per route, or automatically generate a sitemap for your website. This is impossible when your app only has a single entry point.

10. 通知和主屏幕小部件等重新参与功能更容易集成，因为你可以在应用中的任何位置使用查询参数简单地拦截启动和深层链接。

    ¥Re-engagement features like notifications and home screen widgets are easier to integrate as you can simply intercept the launch and deep link, with query parameters, anywhere in the app.

11. 就像在网络上一样，分析和错误报告可以轻松配置为自动包含路由名称，这对于调试和理解用户行为非常有用。

    ¥Like on the web, analytics and error reporting can easily be configured to automatically include the route name, which is useful for debugging and understanding user behavior.

为什么我应该使用 Expo Router 而不是 React Navigation？

¥Why should I use Expo Router over React Navigation?

Expo Router 和 React Navigation 都是来自 Expo 团队的库。我们在 React Navigation 之上构建了 Expo Router，以实现基于文件的路由的优势。Expo Router 是 React Navigation 的超集，这意味着你可以将任何 React Navigation 组件和 API 与 Expo Router 一起使用。

¥Expo Router and React Navigation are both libraries from the Expo team. We built Expo Router on top of React Navigation to enable the benefits of file-based routing. Expo Router is a superset of React Navigation, meaning you can use any React Navigation components and APIs with Expo Router.

如果基于文件的路由不适合你的项目，你可以下拉到 React Navigation 并手动设置路由、类型和链接。

¥If file-based routing isn't right for your project, you can drop down to React Navigation and set up routes, types, and links manually.

如何服务器渲染我的 Expo Router 网站？

¥How do I server-render my Expo Router website?

Expo Router 支持基本静态渲染 (SSG)。服务器端渲染当前需要设置自定义基础架构。

¥Basic static rendering (SSG) is supported in Expo Router. Server-side rendering currently requires custom infrastructure to set up.

我可以使用 React 导航吗？

¥Can I use React Navigation?

是的！React 导航 是 React Native 生态系统中最流行的导航库之一。它由 Expo 团队维护，支持 Android、iOS 和 Web。

¥Yes! React Navigation is one of the most popular navigation libraries in the React Native ecosystem. It is maintained by the Expo team and supports Android, iOS, and the web.

React Navigation 包括对常见导航模式的支持，并且它是完全可定制的，因此你可以实现任何导航模式，即使它没有内置到库中。

¥React Navigation includes support for common navigation patterns, and it's fully customizable so you can achieve any navigation pattern, even if it's not built into the library.

有关如何开始的更多信息，请参阅 React Navigation 文档中的 入门 指南。

¥See the Getting started guide in React Navigation documentation for more information on how to get started.

我可以使用 Wix 的 React Native 导航吗？

¥Can I use React Native Navigation by Wix?

该库在 Expo Go 应用中不可用，且尚不与 expo-dev-client 兼容。

¥This library is not available in the Expo Go app and is not yet compatible with expo-dev-client.

我们建议 React Navigation 中的 createNativeStackNavigator 使用 Android 和 iOS 原生导航 API。

¥We recommend createNativeStackNavigator from React Navigation to use Android and iOS native navigation APIs.