安装 Expo 路由

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

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

快速开始

我们建议使用 create-expo-app 创建一个新的 Expo 应用。这将创建一个已安装 Expo Router 库的最小项目。要创建项目，请运行命令：

Terminal

- npx create-expo-app@latest --template tabs@49

设置完成后，你可以通过运行以下命令来启动你的项目：

Terminal

- npx expo start

要在移动设备上查看你的应用，我们建议从 Expo 开始。随着你的应用变得越来越复杂并且你需要更多控制，你可以创建开发构建。
通过按在 Web 浏览器中打开项目w 在终端用户界面中。按a 对于 Android（需要 Android Studio），或i 适用于 iOS（需要带有 Xcode 的 macOS）。

手动安装

确保 Expo Router 的版本与你的项目正在使用的 Expo SDK 版本兼容。

Expo SDK	Expo 路由
49.0.0	2.0.0
48.0.0	1.0.0

先决条件

确保你的计算机是设置运行 Expo 应用。

创建一个 Expo 项目

要创建新项目，请运行以下命令：

Terminal

- npx create-expo-app

安装依赖

你需要安装以下依赖：

Terminal

-

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

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

设置入口点

在 package.json 中使用 expo-router/entry 文件。初始客户端文件是 app/_layout.js。

package.json

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

删除 package.json 中的入口点或将其替换为 index.js 以明确：

package.json

{
  "main": "index.js"
}

在项目的根目录中创建一个新文件 index.js。如果它已经存在，请将其替换为以下内容：

index.js

import 'expo-router/entry';

修改项目配置

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

app.json

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

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

Terminal

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

然后，启用 Metro Web 支持：

app.json

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

修改 babel.config.js

将 plugins 数组中的 expo-router/babel 插件添加到项目的 babel.config.js 中：

babel.config.js

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

适用于低于 49 的 Expo SDK

Expo 路由至少需要 metro@0.76.0。如果你使用的 Expo SDK 版本低于 49，则需要通过设置 Yarn 分辨率或 npm 覆盖来强制升级 metro 版本。

package.json

{
  "resolutions": {
    "metro": "0.76.0",
    "metro-resolver": "0.76.0"
  }
}

package.json

{
  "overrides": {
    "metro": "0.76.0",
    "metro-resolver": "0.76.0"
  }
}