采用 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 模板:
- npm install expo请确保安装的 expo 版本与你当前已安装的 react-native 版本兼容。
更新入口文件
将入口文件修改为使用 registerRootComponent 而不是 AppRegistry.registerComponent:
| 1 | import {AppRegistry} from 'react-native'; | |
| 2 | import {name as appName} from './app.json'; | |
| 1 | import {registerRootComponent} from 'expo'; | |
| 3 | 2 | import App from './App'; |
| 4 | ||
| 5 | AppRegistry.registerComponent(appName, () => App); | |
| 3 | registerRootComponent(App); |
进一步了解
registerRootComponent。
Prebuild
请确保你已经提交了更改,以防你想回滚,命令也会对此发出警告!
如果你正在迁移一个已有项目,那么你可能会希望先查看迁移原生自定义内容。
运行以下命令,根据应用配置(app.json/app.config.js)重新生成 android 和 ios 目录:
- npx expo prebuild --clean你可以通过在本地构建项目来测试是否一切正常:
# 构建你的原生 Android 项目- npx expo run:android# 构建你的原生 iOS 项目- npx expo run:ios进一步了解编译原生应用。
额外更改
以下更改是可选的,但建议进行。
.gitignore
你可以将 .expo 添加到你的 .gitignore 中,以防止 Expo CLI 生成的值被提交。这些值在你的本地电脑上对你的项目是唯一的。
当你创建新项目时,android 和 ios 目录会自动添加到 .gitignore 中,以确保它们不会在 prebuild 之间被提交。
app.json
移除顶层 expo 对象之外的所有字段,因为这些字段在 npx expo prebuild 中不会被使用。
metro.config.js
参见自定义 Metro。
package.json
你可能希望将脚本改为使用 Expo CLI 的运行命令:
这些命令具有更好的日志记录、自动代码签名、更好的模拟器处理,并且它们会确保你运行 npx expo start 来提供文件服务。
迁移原生自定义内容
如果你的项目有任何原生修改(对 android 或 ios 目录的更改,例如应用图标配置或启动页),那么你需要配置应用配置(app.json)以反映这些原生更改。
- 检查你的更改是否与内置的应用配置字段重叠。例如,如果你有应用图标,请确保在 app.json 中将其定义为
expo.icon,然后重新运行npx expo prebuild。 - 查找你使用的任何包是否需要 Expo 配置插件。如果你项目中的某个包需要在 android 或 ios 目录中进行额外更改,那么你可能需要一个 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时会自动支持。