安装 Expo 路由

了解如何通过使用 Expo Router 创建新项目或将库添加到现有项目来快速入门。

请按照以下步骤使用 Expo Router 库创建新项目或将其添加到现有项目中。

🌐 Find the steps below to create a new project with Expo Router library or add it to your existing project.

快速开始

🌐 Quick start

我们建议使用 create-expo-app 创建一个新的 Expo 应用，以便创建一个已经安装和配置了 Expo Router 库的项目：

🌐 We recommend creating a new Expo app using create-expo-app to create a project with Expo Router library already installed and configured:

Terminal

- npx create-expo-app@latest

现在，你可以通过运行以下命令来开始你的项目：

🌐 Now, you can start your project by running:

Terminal

- npx expo start

要在移动设备上查看你的应用，我们建议从 Expo Go 开始。随着应用复杂性的增加，并且你需要更多控制时，你可以创建一个开发版本。
通过在终端界面按 w 在网页浏览器中打开项目。按 a 用于 Android（需要安装 Android Studio），或按 i 用于 iOS（需要 macOS 和 Xcode）。

手动安装

🌐 Manual installation

如果你有一个以前使用 Expo 创建的项目，但没有安装 Expo Router 库，请按照以下步骤操作。

🌐 Follow the steps below if you have a project that was previously created with Expo but does not have Expo Router library installed.

先决条件

🌐 Prerequisites

确保你的电脑已设置好以运行 Expo 应用。

🌐 Make sure your computer is set up for running an Expo app.

安装依赖

🌐 Install dependencies

你需要安装以下依赖：

🌐 You'll need to install the following dependencies:

Terminal

-

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

上述命令将安装与你的项目所使用的 Expo SDK 版本兼容的这些库版本。

🌐 The above command will install versions of these libraries that are compatible with the Expo SDK version your project is using.

设置入口点

🌐 Setup entry point

对于属性 main，在 package.json 中使用 expo-router/entry 作为其值。初始客户端文件是 app/_layout.tsx。

🌐 For the property main, use the expo-router/entry as its value in the package.json. The initial client file is app/_layout.tsx.

package.json

{
  "main": "expo-router/entry"
}

自定义入口点以初始化和加载副作用

你可以在你的 Expo Router 项目中创建一个自定义入口点，以在应用加载根布局（app/_layout.tsx）之前初始化和加载副作用。以下是一些自定义入口点的常见情况：

🌐 You can create a custom entry point in your Expo Router project to initialize and load side-effects before your app loads the root layout (app/_layout.tsx). Below are some of the common cases for a custom entry point:

正在初始化全局服务，如分析、错误报告等。
设置 polyfill
使用 LogBox 从 react-native 忽略特定日志

在项目根目录下创建一个新文件，例如 index.js。创建该文件后，项目结构应如下所示：

app
_layout.tsx
index.js
package.json
Other project files
将你的自定义配置导入或添加到文件中。然后，导入 expo-router/entry 来注册应用入口。请记住始终最后导入它，以确保在应用渲染之前所有配置都已正确设置。
index.js
```
// Import side effects first and services

// Initialize services

// Register app entry through Expo Router
import 'expo-router/entry';
```
在 package.json 中更新 main 属性，以指向新的入口文件。
package.json
```
{
  "main": "index.js"
}
```

修改项目配置

🌐 Modify project configuration

在你的应用配置中添加深度链接 scheme：

🌐 Add a deep linking scheme in your app config:

app.json

{
  "scheme": "your-app-scheme"
}

如果你正在为网页开发应用，请安装以下依赖：

🌐 If you are developing your app for web, install the following dependencies:

Terminal

- npx expo install react-native-web react-dom

然后，通过将以下内容添加到你的应用配置中来启用Metro web支持：

🌐 Then, enable Metro web support by adding the following to your app config:

app.json

{
  "web": {
    "bundler": "metro"
  }
}

修改 babel.config.js

🌐 Modify babel.config.js

确保在 babel.config.js 文件中将 babel-preset-expo 用作 preset，或者删除该文件：

🌐 Ensure you use babel-preset-expo as the preset, in the babel.config.js file or delete the file:

babel.config.js

module.exports = function (api) {
  api.cache(true);
  return {
    presets: ['babel-preset-expo'],
  };
};

清除 bundler 缓存

🌐 Clear bundler cache

在更新 Babel 配置文件后，运行以下命令以清除打包器缓存：

🌐 After updating the Babel config file, run the following command to clear the bundler cache:

Terminal

- npx expo start --clear

更新分辨率

🌐 Update resolutions

如果你正在从旧版本的 Expo Router 升级，请确保从 package.json 中移除所有过时的 Yarn 解析或 npm 覆盖项。具体来说，请从 package.json 中移除 metro、metro-resolver、react-refresh 的解析。

🌐 If you're upgrading from an older version of Expo Router, ensure you remove all outdated Yarn resolutions or npm overrides in your package.json. Specifically, remove metro, metro-resolver, react-refresh resolutions from your package.json.