了解连续原生生成 (CNG) 及其工作原理。
单个原生项目本身的维护、扩展和更新都很复杂。在跨平台应用中,你有多个原生项目,你必须维护这些项目并保持最新的操作系统版本,以避免在任何第三方依赖中落后太多。
¥A single native project on its own is complicated to maintain, scale, and update. In a cross-platform app, you have multiple native projects that you must maintain and keep up to date with the latest operating system releases to avoid falling too far behind in any third-party dependencies.
随着项目的增长,每个第三方依赖所涉及的复杂性会增加,并使应用几乎不可能升级 - 这极大地减缓了开发者的动力,阻碍了添加复杂的原生功能,并导致应用的功能减弱。为了解决这些问题,我们正式制定了一个称为连续原生生成 (CNG) 的流程。
¥As your project grows, the complexity involved with each third-party dependency increases and makes the app nearly impossible to upgrade — this drastically slows down developer momentum, discourages adding complex native functionality, and leads to less powerful apps. To combat these issues, we formalized a process called Continuous Native Generation (CNG).
连续原生生成是一个抽象概念,描述了从一组输入生成临时原生项目的过程。输入通常是配置和代码的组合,输出是可以编译为原生应用的原生项目。我们创造这个术语来描述 Expo 预建 为 React Native 应用生成原生项目的过程,但是,这个概念不仅限于 React Native 或跨平台应用。
¥Continuous Native Generation is an abstract concept that describes the process of generating ephemeral native projects from a set of inputs. The inputs are typically a combination of configuration and code, and the output is a native project that can be compiled into a native app. We coined this term to describe the process used by Expo Prebuild to generate native projects for React Native apps, however, the concept is not limited to React Native or cross-platform apps.
¥Usage in React Native
任何 React Native 应用都可以通过使用 Expo 预建 来利用连续原生生成。这使你能够自动升级 React Native、安装/卸载库、大规模白标签、在多个应用之间共享配置、生成资源、减少 孤立代码 等等 - 一般来说,它允许你以更大的规模构建更强大的应用, 不影响迭代速度。
¥Any React Native app can leverage Continuous Native Generation by using Expo Prebuild. This enables you to automate upgrading React Native, installing/uninstalling libraries, white-labeling at scale, sharing config across multiple apps, generating assets, reducing orphaned code, and more — generally, it allows you to build more powerful apps, at larger scales, without compromising on iteration speed.
Expo 作为一个框架,通过组合以下工具来实现连续原生生成:
¥Expo as a framework enables Continuous Native Generation by combining the following tools:
应用配置 文件。
¥The app config file.
传递给 npx expo prebuild
命令的参数。
¥Arguments passed to the npx expo prebuild
command.
项目中安装的 expo
版本以及相应的 预构建模板。
¥Version of expo
that's installed in the project and corresponding prebuild template.
自动链接,用于链接 package.json 中找到的 原生模块。
¥Autolinking, for linking native modules found in the package.json.
原生订阅者,用于减少入口文件中的原生代码副作用。
¥Native Subscribers, for reducing native code side-effects in entry files.
用于代码签名附加目标和权利的 EAS 凭证。
¥EAS Credentials for code signing additional targets and entitlements.
这归结为一个工作流程,用户可以使用应用配置来表达任何原生应用,并通过运行 npx expo prebuild
来连续生成该项目。
¥This boils down to a workflow where a user can express any native application with the app config and generate that project continuously — by running npx expo prebuild
.
¥Community adoption
许多复杂的库和服务已经通过 Expo Prebuild 支持 CNG,例如 MapBox、OneSignal、条纹 和 React Native Firebase。
¥Many complex libraries and services already support CNG via Expo Prebuild such as, MapBox, OneSignal, Stripe, and React Native Firebase.
社区配置插件存储库 还支持没有第一方集成的库。
¥Libraries that don't have first-party integration are also supported in the community Config Plugins repository.
Expo Config 插件对本地构建和添加到项目提供一流的支持,无需任何第三方干预或 npm 发布。这使你能够快速行动并修补东西!
¥Expo Config Plugins have first-class support for building locally and adding to your project without any third-party intervention or npm publishing. This enables you to move fast and patch things!
注意:npm 下载量并不能准确反映用户数量。然而,它提供了采用率的粗略估计。
¥Note: npm downloads do not exactly reflect the number of users. However, it provides a rough estimate of adoption.
¥Adoption by library authors
React Native 库可以根据其库的复杂性以多种方式采用 CNG。我们概述了库采用的不同场景:
¥React Native libraries can adopt CNG in various ways depending on the complexity of their libraries. We've outlined different scenarios for library adoption:
无原生代码或配置副作用:没有原生代码或配置副作用的库(例如 react-native-blurhash
)可以与 npx expo prebuild
无缝集成。他们可以依靠节点模块解析和 Expo 自动链接 链接到原生项目,而不需要任何额外的配置。
¥No native code or configuration side-effects: Libraries without native code or configuration side-effects, such as react-native-blurhash
, can seamlessly integrate with npx expo prebuild
. They can rely on Node Module Resolution and Expo Autolinking to link into the native project without requiring any additional configuration.
安装后无需额外设置的原生代码:具有原生代码的库通常可以自动安装并与 Expo 自动链接 链接,Expo 自动链接 在构建原生应用之前运行。
¥Native code with no additional setup after install: Libraries with native code can often be installed and linked automatically with Expo Autolinking which runs before the native app is built.
其他配置副作用和设置:需要额外配置副作用的库可以通过为其库创建 Expo 配置插件 来采用 CNG。这种方法使库作者能够自动添加值,例如将权限消息添加到 Info.plist,或在 Xcode 项目中注入目标。
¥Additional configuration side-effects and setup: Libraries that require additional configuration side-effects can adopt CNG by creating Expo Config Plugins for their libraries. This approach enables library authors to automate adding values such as permission messages to the Info.plist, or injecting targets in the Xcode project.
依赖于原生运行时钩子的库:依赖于特定原生运行时钩子的库(例如通过 AppDelegate
、MainActivity
、MainApplication
等拦截初始启动 URL)可以利用 生命周期监听器 来最大程度地减少其库的副作用。
¥Libraries Dependent on Native Runtime Hooks: Libraries that depend on specific native runtime hooks, such as intercepting the initial launch URL via the AppDelegate
, MainActivity
, MainApplication
, and so on, can utilize Lifecycle listeners to minimize the side-effects of their library.
虽然库作者采用 CNG 并不是使用 npx expo prebuild
的先决条件,但它显着增强了用户体验。如果库作者尚未采用 CNG,用户仍然可以通过创建本地配置插件来修改原生生成管道来使用 npx expo prebuild
。这种灵活性确保了 React Native 社区内的所有用户都可以使用 CNG,并且受益匪浅。
¥While library authors' adoption of CNG is not a prerequisite for using npx expo prebuild
, it significantly enhances the user experience. If a library author has not yet adopted CNG, users can still use npx expo prebuild
by creating local Config Plugins to modify the native generation pipeline. This flexibility ensures that the adoption of CNG is accessible and beneficial to all users within the React Native community.
¥Success
CNG 旨在通过将配置划分为可测试和可维护的部分,使开发者能够构建比平常更好的应用。这使得开发者能够在不影响迭代速度的情况下构建更强大的应用。
¥CNG is designed to empower developers to build better apps than they normally could, by dividing configuration into testable and maintainable pieces. This allows developers to build more powerful apps without compromising on iteration speed.
该模式已被证明在 React Native 社区中可以通过以下方式发挥作用。
¥This pattern has been proven to work in the React Native community in the following ways.
¥Upgrades
不使用 Continuous Native Generation 的 React Native 开发者报告说,根据 React Native 调查 (2022),将他们的应用升级到最新版本的 React Native 是该库的第一个弱点。
¥React Native developers who don't use Continuous Native Generation have reported that upgrading their apps to the latest version of React Native is the number one weakness of the library as per React Native Survey (2022).
使用 CNG 时,升级过程仅涉及升级 npm 依赖、应用配置和重新运行 npx expo prebuild --clean
。
¥When using CNG, the upgrade process simply involves upgrading the npm dependencies, app config, and re-running npx expo prebuild --clean
.
¥Features
社区已经能够将困难的原生功能转换为简单的配置文件,这使开发者能够在不影响迭代速度的情况下构建更强大的应用。
¥The community has been able to convert difficult native features into simple configuration files, which has allowed developers to build more powerful apps without compromising on iteration speed.
以下是一些令人印象深刻的例子:
¥Here are a few impressive examples:
iOS Safari 扩展 — 我们可以看到为 iOS 创建 Safari 扩展的过程,这是一个众所周知的难以实现的功能,可以归结为几行 JSON。
¥iOS Safari Extensions — We can see the process of creating a Safari Extension for iOS, which is a notoriously difficult feature to implement, boiled down to a couple of lines of JSON.
iMessage 贴纸应用 — 此 Expo 配置插件可以从 JSON 对象生成整个 iMessage Sticker 应用。
¥iMessage Sticker App — This Expo Config Plugin can generate an entire iMessage Sticker App from a JSON object.
跨平台端到端测试 — 配置原生应用以支持在单行中使用 Detox 进行 E2E 测试。
¥Cross-platform End-2-End testing — Configure native apps to support E2E testing with Detox in a single-line.
整个 Firebase 套件 — 在这里,你可以看到整个原生 Firebase 套件,从跨多个 IDE 的多步骤原生流程,一直到基本的 JSON 配置。
¥Entire Firebase suite — Here you can see the entire native Firebase suite going from a multi-step native process across multiple IDEs, down to basic JSON configuration.
跨平台主屏幕小部件 — 此 Expo 配置插件可以为 Android 和 iOS 生成主屏幕小部件。
¥Cross-platform Home screen Widgets — This Expo Config Plugin can generate a home screen widget for Android and iOS.
通知扩展和代码签名 — 此 Expo 配置插件不仅在 iOS 上生成通知扩展目标。然而,它还增强了 EAS 凭证服务,以保持零配置代码签名的正常工作。
¥Notification extension and code signing — This Expo Config Plugin not only generates a notification extension target on iOS. However, it also augments the EAS credentials service to keep zero-config code signing working.
苹果应用剪辑 — 此 Expo Config 插件采用跨多个目标的多步骤过程生成 Apple App Clip 的过程,并将其简化为单行 ["react-native-app-clip", { "name": "My App Clip" }]
。
¥Apple App Clips — This Expo Config Plugin takes the process of generating an Apple App Clip from a multi-step process, ranging across multiple targets, and shakes it down to a single line ["react-native-app-clip", { "name": "My App Clip" }]
.
在任何时候,这些功能都可以轻松添加,也可以轻松删除,没有任何副作用。CNG 允许开发者尝试复杂的功能,并快速迭代它们,而无需担心长期维护成本或项目中潜在的孤立代码或未提交的原生缓存。
¥At any point, these features can be easily added, and just as easily removed, without any side effects. CNG allows developers to experiment with complex features, and iterate on them quickly without worrying about the long-term maintenance costs or potential orphaned code in their project or uncommitted native caches.
这可以带来更好的应用、更快的构建速度。
¥This nets out to better apps, built faster.
¥Frequently Asked Questions
¥Is Continuous Native Generation (CNG) limited to React Native projects?
不,CNG 是一种多功能模式,可以应用于任何原生项目。虽然 Expo Prebuild 是专门为 React Native 项目实现 CNG 的工具,但概念本身并不限于此框架。
¥No, CNG is a versatile pattern that can be applied to any native project. While Expo Prebuild is a tool that implements CNG specifically for React Native projects, the concept itself is not limited to this framework.
¥Can CNG be used for operating systems other than Android and iOS?
绝对地!CNG 是一个抽象概念,可以应用于任何操作系统。以 Expo 为例,虽然 Expo Prebuild 官方为 Android 和 iOS 实现了 CNG,但它也为用户提供了抽象平台支持,以便为其他平台创建实现。
¥Absolutely! CNG is an abstract concept that can be applied to any operating system. Take Expo for example, although Expo Prebuild officially implements CNG for Android and iOS, it also provides abstract platform support for users to create implementations for additional platforms.
¥Is using Expo a requirement for CNG?
一点也不。CNG 是一种开放的模式,任何社区都可以采用。我们抽象地定义了该模式,以帮助其他社区了解如何在自己的项目中采用 CNG。
¥Not at all. CNG is an open pattern that can be adopted by any community. We've defined the pattern abstractly to help other communities understand how they can adopt CNG for their own projects.
¥How does CNG compare to web development patterns such as Static Site Generation (SSG)?
CNG 与 SSG 的相似之处在于,它根据一组输入生成一个项目。然而,CNG 与 SSG 的输出不同;它生成原生运行时代码而不是静态网站代码。这意味着原生项目是按需生成的,一旦原生项目编译成原生应用,生成的源代码和配置就会被丢弃。
¥CNG shares similarities with SSG in that it generates a project from a set of inputs. However, CNG differs from SSG in its output; it generates native runtime code instead of static website code. This means the native project is generated on-demand, and the generated source code and configuration are discarded once the native project is compiled into a native app.
¥Is it possible to use CNG with an existing brownfield project?
CNG 旨在持续管理原生项目的整个状态。因此,它不适用于现有的棕地项目。但是,你可以使用 CNG 生成新的原生项目,然后将其集成到现有的棕地项目中。
¥CNG is designed to manage the entire state of a native project continuously. As a result, it's not intended for use with existing brownfield projects. However, you can use CNG to generate a new native project, which can then be integrated into an existing brownfield project.