Skip to main content

创建新的架构应用


提醒

本文档仍为 experimental，详细信息可能会随着我们的迭代而发生变化。 欢迎在此页面分享你对 工作组内部讨论 的反馈。

英This documentation is still experimental and details are subject to changes as we iterate. Feel free to share your feedback on the discussion inside the working group for this page.

而且，它还包含几个 手动步骤。 请注意，一旦新架构稳定，这将不代表最终的开发者体验。 我们正在开发工具、模板和库，以帮助你快速开始使用新架构，而无需完成整个设置。

英Moreover, it contains several manual steps. Please note that this won't be representative of the final developer experience once the New Architecture is stable. We're working on tools, templates and libraries to help you get started fast on the New Architecture, without having to go through the whole setup.

此页面将帮助你创建一个使用新架构的新 React Native 应用。

英This page will help you create a new React Native app that uses the New Architecture.

开发环境​

在继续之前，请确保你已执行 React Native CLI 快速入门 选项卡下 设置开发环境 部分中的所有步骤。

英Before continuing, make sure you've followed all the steps in the Setting up the development environment section under the React Native CLI Quickstart tab.

如果遵循设置指南，请在到达第 运行你的 React Native 应用 部分时停止，然后继续遵循本指南。

英If following the setup guide, stop when you reach the section Running your React Native Application, and resume following this guide.

提醒

如果你正在使用 Expo，目前无法启用新架构，必须等待 Expo SDK 的未来版本。

创建新应用​

如果你之前安装了全局 react-native-cli 软件包，请将其删除，因为它可能会导致意外问题：

npm uninstall -g react-native-cli @react-native-community/cli

如果你已经设置了开发环境，请从模板创建一个新的 React Native 项目：

英If you already have your development environment set up, create a new React Native project from the template:

npx react-native@latest init AwesomeProject
提醒

新架构在 React Native 0.68 或更高版本中可用。

配置​

请按照以下步骤启用新架构并构建应用。

英Follow the steps below to enable the New Architecture and build the app.

启用 Hermes​

Hermes 是一个针对 React Native 优化的开源 JavaScript 引擎。 Hermes 将成为未来的默认引擎，我们强烈建议你使用它。

英Hermes is an open-source JavaScript engine optimized for React Native. Hermes will be the default engine in the future, and we highly recommend you use it.

请 按照 React Native 网站上的说明进行操作 在你的应用中启用 Hermes。

英Please follow the instructions on the React Native website to enable Hermes in your application.

启用新架构​

目标操作系统​

通过 either 将 newArchEnabled 属性设置为 true：

英Set the newArchEnabled property to true by either:

  • 更改 android/gradle.properties 中的相应行
  • 设置环境变量 ORG_GRADLE_PROJECT_newArchEnabled=true

然后照常构建并运行应用：

英Then build and run the app as usual:

yarn android
注意

你可能会注意到，由于使用 Android NDK 进行 C++ 编译的额外步骤，新架构的构建时间更长。 要缩短构建时间，请参阅 加快构建阶段。

确认新架构正在使用​

当 Metro 提供 JavaScript 包时构建并运行应用后，你应该在 Metro 日志中看到 "fabric": true：

英After you build and run the app when Metro serves the JavaScript bundle, you should see "fabric": true in the Metro logs:

Metro shows fabric: true

想知道更多？​

如果你想查看与新架构相关的代码更改，请查看 将助手从版本 0.67.4 升级到 0.68.0。 为新架构添加的文件标有黄色横幅。

英If you'd like to view the code changes relevant to the New Architecture, take a look at the upgrade helper from version 0.67.4 to 0.68.0. Files that were added for the New Architecture are marked with a yellow banner.

有关每个文件的作用的进一步说明，请查看这些指南以逐步完成更改： 在你的应用中启用新架构

英For further explanations of what each file is doing, check out these guides to walk through the changes step-by-step: Enabling The New Architecture in Your App