采用 Prebuild

学习如何在使用 React Native CLI 启动的项目中采用 Expo Prebuild。

使用 Expo Prebuild 以 持续生成您的本地项目 有 许多优势。本指南将向您展示如何在使用 npx @react-native-community/cli@latest init 启动的项目中采用 Expo Prebuild。转换项目所需的时间取决于您对 Android 和 iOS 本地项目所做的自定义本地更改的数量。对于一个全新的项目，这可能需要一两分钟，而对于大型项目，这将花费更长时间。

采用 prebuild 将通过本地链接 expo-modules-core 自动添加对使用 Expo 本地模块 API 开发模块的支持。您还可以在项目中使用 Expo CLI 的任何命令。

并非所有版本的 react-native 都被明确支持。确保使用与之对应的 Expo SDK 版本的 react-native 版本。

安装 expo 包

expo 包包含 npx expo prebuild 命令，并指示使用哪个 prebuild 模板：

确保安装适合您当前安装的 版本的 react-native 的 expo 版本。

更新入口文件

修改入口文件以使用 registerRootComponent 而不是 AppRegistry.registerComponent：

+ import {registerRootComponent} from 'expo';

- import {AppRegistry} from 'react-native';
import App from './App';
- import {name as appName} from './app.json';

- AppRegistry.registerComponent(appName, () => App);
+ registerRootComponent(App);

了解更多关于 registerRootComponent。

Prebuild

确保您已提交更改，以防您想要恢复，命令也会警告您这一点！

如果您正在迁移现有项目，则可能想先参考 迁移本地自定义。

运行以下命令，根据应用配置 (app.json/app.config.js) 重新生成 android 和 ios 目录：

您可以通过本地构建项目来测试一切是否正常：

了解更多关于 编译本地应用。

额外更改

以下更改是可选但推荐的。

.gitignore

您可以将 .expo 添加到您的 .gitignore 中，以防止 Expo CLI 生成的值被提交。这些 值是您项目的唯一标识 在您的本地计算机上。

在您创建新项目时，android 和 ios 目录会自动添加到 .gitignore 中，确保它们在 prebuild 之间不会被提交。

app.json

删除所有在顶级 expo 对象之外的字段，因为这些在 npx expo prebuild 中不会被使用。

{
-  "name": "myapp",
-  "displayName": "myapp"
+  "expo": {
+    "name": "myapp"
+  }
}

metro.config.js

请参阅 自定义 Metro。

package.json

您可能想要更改脚本以使用 Expo CLI 运行命令：

  "scripts": {
    "start": "expo start",
-    "android": "react-native run-android",
-    "ios": "react-native run-ios",
+    "android": "expo run:android",
+    "ios": "expo run:ios",
  },

这些命令具有更好的日志记录、自动代码签名、更好的模拟器处理，并确保您运行 npx expo start 来服务文件。

迁移本地自定义

如果您的项目有任何本地修改（对 android 或 ios 目录的更改，例如应用程序图标配置或启动画面），那么您需要配置您的应用配置 (app.json) 以反映这些本地更改。

• 检查您的更改是否与内置的 应用配置字段 重叠。例如，如果您有应用程序图标，请确保在 app.json 中将其定义为 expo.icon，然后重新运行 npx expo prebuild。
• 查找您使用的任何包是否需要 Expo 配置插件。如果项目中的某个包需要在 android 或 ios 目录中进行额外更改，则您可能需要配置插件。当您运行 npx expo install 并使用 package.json 依赖关系中的所有包时，某些插件可以被自动添加。如果某个包需要插件但未提供，则可以尝试检查社区插件 expo/config-plugins 来查看是否已经存在。
• 您可以使用 VS Code Expo 扩展 检查您的更改并调试 prebuild 是否生成您期望的本地代码。只需按 Cmd ⌘ + Shift + p，输入 "Expo: Preview Modifier"，然后选择您希望检查的本地文件。
• 此外，您可以开发本地配置插件以满足您的需求。 了解更多。

添加更多功能

Prebuild 是自动化冰山的一角，您可以接下来采用以下一些功能：

• EAS Build: 代码签名和云构建。
• EAS Update: 立即发送空中更新。
• Expo for web: 在浏览器中运行您的应用。
• Expo Dev Client: 围绕您的本地运行时创建您自己的个人 "Expo Go" 类型的应用程序。
• Expo 本地模块 API: 使用 Swift 和 Kotlin 编写模块。在使用 npx expo prebuild 时，这会自动支持。