中文网
Nodejs.cn 旗下网站
首页指南EAS参考教程

安装 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

1

我们建议使用 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

2

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

¥Now, you can start your project by running:

Terminal
- npx expo start

  • 要在移动设备上查看你的应用，我们建议从 Expo 开始。随着你的应用变得越来越复杂并且你需要更多控制，你可以创建 开发构建。

    ¥To view your app on a mobile device, we recommend starting with Expo Go. As your application grows in complexity and you need more control, you can create a development build.

  • 在终端 UI 中按 w 在 Web 浏览器中打开项目。对于 Android，按 a（需要 Android Studio），对于 iOS，按 i（需要带有 Xcode 的 macOS）。

    ¥Open the project in a web browser by pressing w in the Terminal UI. Press a for Android (Android Studio is required), or i for iOS (macOS with Xcode is required).

手动安装

¥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.

1

安装依赖

¥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.

2

设置入口点

¥Setup entry point

对于属性 main，使用 expo-router/entry 作为其在 package.json 中的值。初始客户端文件是 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"
}
Custom entry point to initialize and load side-effects

你可以在 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:

  • 初始化全局服务，如分析、错误报告等。

    ¥Initializing global services like analytics, error reporting, and so on.

  • 设置 polyfill

    ¥Setting up polyfills

  • 使用 react-native 中的 LogBox 忽略特定日志

    ¥Ignoring specific logs using LogBox from react-native

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

    ¥Create a new file in the root of your project, such as index.js. After creating this file, the project structure should look like this:

app
 _layout.tsx
index.js
package.json
Other project files

  1. 将自定义配置导入或添加到文件中。然后，导入 expo-router/entry 以注册应用条目。请记住始终最后导入它，以确保在应用渲染之前正确设置所有配置。

    ¥Import or add your custom configuration to the file. Then, import expo-router/entry to register the app entry. Remember to always import it last to ensure all configurations are properly set up before the app renders.

index.js
 // Import side effects first and services

 // Initialize services

 // Register app entry through Expo Router
 import 'expo-router/entry';

  1. 更新 package.json 中的 main 属性以指向新的条目文件。

    ¥Update the main property in package.json to point to the new entry file.

package.json
 {
   "main": "index.js"
 }

3

修改项目配置

¥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"
}
}

4

修改 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'],
};
};

如果你要从早于 v3 的 Expo Router 版本进行升级，请删除 plugins: ['expo-router/babel']。expo-router/babel 已合并到 SDK 50 (Expo Router v3) 的 babel-preset-expo 中。

¥If you're upgrading from a version of Expo Router that is older than v3, remove the plugins: ['expo-router/babel']. expo-router/babel was merged in babel-preset-expo in SDK 50 (Expo Router v3).

5

清除打包器缓存

¥Clear bundler cache

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

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

Terminal
- npx expo start --clear

6

更新决议

¥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.