从 React Native CLI 迁移到 Expo CLI

了解如何将任何 React Native 项目从 React Native CLI (@react-native-community/cli) 迁移到 Expo CLI。

要从 React Native CLI（npx @react-native-community/cli@latest init）迁移到 Expo CLI，你需要安装 expo 包，该包包含 Expo Modules API 和 Expo CLI。本指南涵盖了安装步骤、使用 Expo CLI 的好处，以及迁移到 Expo CLI 后如何编译和运行你的项目。

🌐 To migrate from React Native CLI (npx @react-native-community/cli@latest init) to Expo CLI, you'll need to install the expo package, which includes the Expo Modules API and Expo CLI. This guide covers the installation step, the benefits of using Expo CLI, and how to compile and run your project after migrating to Expo CLI.

强烈建议在使用其他 Expo 工具时使用 Expo CLI。许多工具都需要它，例如 EAS Update、Expo Router 和 expo-dev-client，没有它其他功能可能无法正常使用。

🌐 It is strongly recommended to use Expo CLI when using other Expo tools. It is required for many tools, such as EAS Update, Expo Router, and expo-dev-client, and other features may not work as well without it.

安装 expo 包

🌐 Install the expo package

在大多数情况下，你只需在项目目录中执行以下命令即可安装包：

🌐 In most cases, executing the following command in a project directory to install the package is all you need to do:

有关详细的安装指南，请参阅 安装 Expo 模块。

🌐 For a detailed installation guide, see Install Expo modules.

信息 安装 expo 包后，你需要配置项目以使用 Expo CLI。这包括设置 Metro 配置、Babel 预设和原生项目配置。完整的设置说明请参见 在 Android 和 iOS 上为打包配置 Expo CLI 部分。

为什么选择 Expo CLI 而不是 React Native CLI

🌐 Why Expo CLI instead of React Native CLI

Expo CLI 命令相比 @react-native-community/cli 中的类似命令提供了几个优势，包括：

🌐 Expo CLI commands provide several benefits over the similar commands in @react-native-community/cli, which includes:

• 通过 j 按键即时访问 Hermes 调试器。
• 调试器随 React Native 开发工具 一起提供。
• 连续本地生成 (CNG) 支持通过 expo prebuild 进行升级、白标化、便捷的第三方包设置，以及更好的代码库可维护性（通过减少接触面）。
• 支持基于文件的路由与 expo-router。
  • 开发中的异步打包。
• 内置的环境变量支持和**.env**文件集成。
• 直接在终端中查看原生日志以及 JavaScript 日志。
• 使用专为 React Native 应用构建的 Expo CLI xcpretty 风格工具改进了本地构建日志格式。例如，在编译 Pod 时，你可以看到是哪个 Node 模块包含了它。
• 一流的 TypeScript 支持。
• 支持使用 paths 和 baseUrl 的 tsconfig.json 别名 内置于 Metro。
• 在 Metro 上支持 Web。为 React Native Web 提供完整类型定义。
• 使用 Tailwind、PostCSS、CSS Modules、SASS 等的现代 CSS 支持。
• 使用 Expo Router 和 Metro web 生成静态站点。
• 开箱即用的对单仓库的支持。
• 支持 Expo 工具，例如 expo-dev-client、Expo Updates 协议 和 EAS Update。
• 使用 npx expo run:ios 时自动执行 pod install。
• npx expo install 为知名软件包选择兼容的依赖版本。
• 在运行 npx expo run:[android|ios] 和 npx expo start 时自动检测端口。如果默认端口上已有其他应用在运行，将使用其他端口。
• Android 或 iOS 设备可以通过互动提示使用 Shift + a 或 Shift + i 启动选择快捷方式。
• 内置支持通过 ngrok 隧道 提供应用服务。
• 使用任何入口 JavaScript 文件在任何端口上进行开发。

我们推荐在大多数面向 Android、iOS 和/或 Web 的 React Native 项目中使用 Expo CLI。它尚未内置对最流行的非官方平台（如 Windows 和 macOS）的支持。如果要为这些平台构建应用，可以在支持的平台上使用 Expo CLI，而在其他平台上使用 @react-native-community/cli。

🌐 We recommend Expo CLI for most React Native projects that target Android, iOS, and/or web. It does not yet have built-in support for the most popular out-of-tree platforms, such as Windows and macOS. If building for these platforms, you can utilize Expo CLI for the supported platforms and @react-native-community/cli for the others.

编译并运行你的应用

🌐 Compile and run your app

安装 expo 软件包后，你可以使用以下命令，这些命令是 npx react-native run-android 和 npx react-native run-ios 的替代方案：

🌐 After installing the expo package, you can use the following commands which are alternatives to npx react-native run-android and npx react-native run-ios:

在构建项目时，你可以使用 --device 标志选择设备或模拟器。这同样适用于连接到你电脑的任何 iOS 设备。

🌐 When building your project, you can choose a device or simulator by using the --device flag. This also applies to any iOS device that is connected to your computer.

独立启动打包器

🌐 Start the bundler independently

npx expo run:[android|ios] 会自动启动打包器/开发服务器。如果你想使用 npx expo start 命令独立启动打包器，请将 --no-bundler 传递给 npx expo run:[android|ios] 命令。

常见问题

🌐 Common questions

module.exports = {
  dependencies: {
    expo: {
      platforms: {
        android: null,
        ios: null,
        macos: null,
      },
    },
  },
};

下一步

🌐 Next steps

现在，在你的项目中安装并配置了 expo 包之后，你可以开始使用 Expo CLI 和 SDK 的所有功能。以下是一些建议的下一步操作，帮助你深入学习：

🌐 Now, with the expo package installed and configured in your project, you can start using all features from Expo CLI and SDK. Here are some recommended next steps to dive deep: