文档
博客更新日志在 GitHub 上给我们加星
首页指南EAS参考学习
归档Expo SnackDiscord 和论坛Newsletter

安装 Expo Router

编辑

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

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

快速开始

1

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

Terminal
- npx create-expo-app@latest

2

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

Terminal
- npx expo start
  • 要在移动设备上查看您的应用程序，我们建议从 Expo Go 开始。随着您的应用程序复杂度的增加以及对更多控制的需求，您可以创建一个 开发构建。
  • 在终端 UI 中按 w 以在网页浏览器中打开项目。按 a 以进行 Android（需要 Android Studio），或按 i 以进行 iOS（需要 macOS 和 Xcode）。

手动安装

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

先决条件

确保您的计算机 已设置为运行 Expo 应用程序。

1

安装依赖项

您需要安装以下依赖项：

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

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

2

设置入口点

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

package.json
{
  "main": "expo-router/entry"
}
自定义入口点以初始化和加载副作用

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

  • 初始化全局服务，如分析、错误报告等。
  • 设置填充
  • 使用来自 react-native 的 LogBox 忽略特定日志

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

    app
     _layout.tsx
    index.js
    package.json
    其他项目文件

  2. 导入或添加您的自定义配置到该文件。然后，导入 expo-router/entry 以注册应用入口。请记得始终最后导入它，以确保在应用程序呈现之前，所有配置都已正确设置。

    index.js
    // 首先导入副作用和服务

// 初始化服务

// 通过 Expo Router 注册应用入口
import 'expo-router/entry';

  3. 更新 package.json 中的 main 属性，以指向新的入口文件。

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

3

修改项目配置

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

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

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

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

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

app.json
{
  "web": {
    "bundler": "metro"
  }
}

4

修改 babel.config.js

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

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

5

清除打包器缓存

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

Terminal
- npx expo start --clear

6

更新解析

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