从 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 模块 API 和 Expo CLI。本指南涵盖安装步骤、使用 Expo CLI 的好处，以及迁移到 Expo CLI 后如何编译和运行您的项目。

强烈建议在使用其他 Expo 工具时使用 Expo CLI。许多工具（如 EAS 更新、Expo 路由器和 expo-dev-client）需要它，其他功能在没有它的情况下可能无法正常工作。

安装 expo 包

在大多数情况下，在项目目录中执行以下命令以安装包就足够了：

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

安装 expo 包后，您需要配置项目以使用 Expo CLI。这包括设置 Metro 配置、Babel 预设和本机项目配置。有关完整设置说明，请参见 为 Android 和 iOS 打包配置 Expo CLI 部分。

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

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

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

我们建议对于目标 Android、iOS 和/或 web 的大多数 React Native 项目使用 Expo CLI。它尚未对最流行的非树平台（如 Windows 和 macOS）提供内置支持。如果要为这些平台构建，您可以利用支持的 Expo CLI 平台和 @react-native-community/cli 进行其他平台的构建。

编译并运行您的应用

安装 expo 包后，您可以使用以下命令作为 npx react-native run-android 和 npx react-native run-ios 的替代：

在构建项目时，您可以使用 --device 标志选择设备或模拟器。这也适用于连接到您计算机的任何 iOS 设备。

独立启动打包器

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

常见问题

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

下一步

现在，您已在项目中安装并配置了 expo 包，可以开始使用 Expo CLI 和 SDK 的所有功能。以下是一些推荐的下一步，以深入了解：