采用 Prebuild

编辑页面

了解如何在使用 React Native CLI 引导的项目中采用 Expo Prebuild。


For the complete documentation index, see llms.txt. Use this Use this file to discover all available pages.

使用 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 模板

Terminal
npm install expo

请确保安装的 expo 版本与你当前已安装的 react-native 版本兼容。

更新入口文件

将入口文件修改为使用 registerRootComponent 而不是 AppRegistry.registerComponent

index.js
1import {AppRegistry} from 'react-native';
2import {name as appName} from './app.json';
1import {registerRootComponent} from 'expo';
32import App from './App';
4
5AppRegistry.registerComponent(appName, () => App);
3registerRootComponent(App);

进一步了解 registerRootComponent

Prebuild

请确保你已经提交了更改,以防你想回滚,命令也会对此发出警告!

如果你正在迁移一个已有项目,那么你可能会希望先查看迁移原生自定义内容

运行以下命令,根据应用配置(app.json/app.config.js)重新生成 androidios 目录:

Terminal
npx expo prebuild --clean

你可以通过在本地构建项目来测试是否一切正常:

Terminal
# 构建你的原生 Android 项目
npx expo run:android

# 构建你的原生 iOS 项目
npx expo run:ios

进一步了解编译原生应用

额外更改

以下更改是可选的,但建议进行。

.gitignore

你可以将 .expo 添加到你的 .gitignore 中,以防止 Expo CLI 生成的值被提交。这些值在你的本地电脑上对你的项目是唯一的

当你创建新项目时,androidios 目录会自动添加到 .gitignore 中,以确保它们不会在 prebuild 之间被提交。

app.json

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

metro.config.js

参见自定义 Metro

package.json

你可能希望将脚本改为使用 Expo CLI 的运行命令:

这些命令具有更好的日志记录、自动代码签名、更好的模拟器处理,并且它们会确保你运行 npx expo start 来提供文件服务。

迁移原生自定义内容

如果你的项目有任何原生修改(对 androidios 目录的更改,例如应用图标配置或启动页),那么你需要配置应用配置(app.json)以反映这些原生更改。

  • 检查你的更改是否与内置的应用配置字段重叠。例如,如果你有应用图标,请确保在 app.json 中将其定义为 expo.icon,然后重新运行 npx expo prebuild
  • 查找你使用的任何包是否需要 Expo 配置插件。如果你项目中的某个包需要在 androidios 目录中进行额外更改,那么你可能需要一个 Config Plugin。有些插件可以通过对 package.json 依赖中的所有包运行 npx expo install 自动添加。如果某个包需要插件但没有提供,你可以尝试查看 expo/config-plugins 的社区插件,看看是否已经存在。
  • 你可以使用 VS Code Expo 扩展 来检查你的更改,并在 prebuild 生成的原生代码不是你预期的情况下进行调试。只需按 Cmd ⌘ + Shift + p,输入 "Expo: Preview Modifier",然后选择你想要检查的原生文件。
  • 此外,你还可以开发本地 config plugin 来满足你的需求。了解更多

添加更多功能

Prebuild 只是自动化的冰山一角,下面是一些你接下来可以采用的功能:

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