中文网
🌐 Nodejs.cn
首页指南EAS参考教程

采用预构建

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

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

🌐 There are many advantages of using Expo Prebuild to continuously generate your native projects. This guide will show you how to adopt Expo Prebuild in a project that was bootstrapped with npx @react-native-community/cli@latest init. The amount of time it will take to convert your project depends on the amount of custom native changes that you have made to your Android and iOS native projects. This may take a minute or two on a brand new project, and on a large project, it will be much longer.

采用预构建将自动通过本地链接 expo-modules-core 来增加对使用 Expo 原生模块 API 开发模块的支持。你也可以在项目中使用 Expo CLI 的任何命令。

🌐 Adopting prebuild will automatically add support for developing modules with the Expo native module API by linking expo-modules-core natively. You can also use any command from Expo CLI in your project.

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

安装 expo 包

🌐 Install the expo package

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

🌐 The expo package contains the npx expo prebuild command and indicates which prebuild template to use:

Terminal
- npm install expo

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

🌐 Ensure you install the version of expo that works for your currently installed version of react-native.

更新入口文件

🌐 Update the entry file

修改入口文件以使用 registerRootComponent 替代 AppRegistry.registerComponent：

🌐 Modify the entry file to use registerRootComponent instead of 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

警告 请确保你已经提交了更改，以防你想要回滚，这个命令也会提醒你这一点！

如果你正在迁移现有项目，那么你可能首先需要参考迁移本地自定义。

🌐 If you're migrating an existing project, then you may want to refer to migrating native customizations first.

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

🌐 Run the following command to regenerate the android and ios directories based on the app config (app.json/app.config.js) configuration:

Terminal
- npx expo prebuild --clean

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

🌐 You can test that everything worked by building the projects locally:

Terminal
# Build your native Android project
- npx expo run:android

# Build your native iOS project
- npx expo run:ios

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

额外的改变

🌐 Extra changes

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

🌐 The following changes are optional but recommended.

.gitignore

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

🌐 You can add .expo to your .gitignore to prevent generated values from Expo CLI from being committed. These values are unique to your project on your local computer.

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

🌐 The android and ios directories are automatically added to .gitignore when you create a new project, ensuring they are not committed between prebuilds.

app.json

移除位于顶层 expo 对象之外的所有字段，因为它们在 npx expo prebuild 中不会被使用。

🌐 Remove all fields that are outside the top-level expo object as these will not be used in npx expo prebuild.

metro.config.js

请参阅 自定义 Metro。

🌐 See Customizing Metro.

package.json

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

🌐 You may want to change the scripts to use the Expo CLI run commands:

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

🌐 These commands have better logging, auto code signing, better simulator handling, and they ensure you run npx expo start to serve files.

迁移原生自定义

🌐 Migrate native customizations

如果你的项目有任何原生修改（对 android 或 ios 目录的更改，例如应用图标配置或启动屏幕），那么你需要配置你的应用配置文件（app.json）以反映这些原生更改。

🌐 If your project has any native modifications (changes to the android or ios directories, such as app icon configuration or splash screen) then you'll need to configure your app config (app.json) to reflect those native changes.

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

添加更多功能

🌐 Add more features

预构建是自动化的冰山一角，以下是你接下来可以采用的一些功能：

🌐 Prebuild is the tip of the automation iceberg, here are some features you can adopt next: