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.

在应用中启用新架构之前，应满足一些先决条件。

英There are a few prerequisites that should be addressed before the New Architecture is enabled in your application.

更新到最新的 React Native 版本​

React Native 在 0.68.0 版本中发布了对新架构的支持。

英React Native released the support for the New Architecture with the release 0.68.0.

本指南是在你使用 最新的 React Native 版本 的情况下编写的。

英This guide is written with the expectation that you’re using the latest React Native release.

你可以在第 升级到新版本 页找到有关如何升级的说明。

英You can find instructions on how to upgrade in the page upgrading to new versions.

请记住在升级后重新安装依赖（运行 npm install 或 yarn）。

英Remember to re-install the dependencies after upgrading (run npm install or yarn).

信息

每当你需要重命名 ios 文件夹中的某些文件时，请 使用 Xcode 重命名它们。 这可确保 Xcode 项目中的文件引用也得到更新。 You might need to clean the build folder (Project → Clean Build Folder or Cmd ⌘ + Shift ⇪ + K），然后重新构建应用。 如果文件在 Xcode 外部重命名，你可能需要单击旧的 .m 文件引用并找到新文件。

英Whenever you have to rename some files in the ios folder, please use Xcode to rename them. This ensure that the file references are updated in the Xcode project as well. You might need to clean the build folder (Project → Clean Build Folder or Cmd ⌘ + Shift ⇪ + K) before re-building the app. If the file is renamed outside of Xcode, you may need to click on the old .m file reference and Locate the new file.

Android - 启用新架构​

如果你成功地将项目更新到最新版本的 React Native，则你已满足在 Android 上使用新架构的所有先决条件。

英If you successfully updated your project to the latest version of React Native, you already meet all the prerequisites to use the New Architecture on Android.

你只需按如下方式更新 android/gradle.properties 文件：

英You will only need to update your android/gradle.properties file as follows:

# Use this property to enable support to the new architecture.
# This will allow you to use TurboModules and the Fabric render in
# your application. You should enable this flag either if you want
# to write custom TurboModules/Fabric components OR use libraries that
# are providing them.
-newArchEnabled=false
+newArchEnabled=true

iOS - 启用新架构​

如果你成功地将项目更新到最新版本的 React Native，则你已满足在 iOS 上使用新架构的所有先决条件。

英If you successfully updated your project to the latest version of React Native, you already meet all the prerequisites to use the New Architecture on iOS.

你只需要通过使用正确的标志运行 pod install 来重新安装 Pod：

英You will only need to reinstall your pods by running pod install with the right flag:

# Run pod install with the flag:
RCT_NEW_ARCH_ENABLED=1 bundle exec pod install

运行应用​

现在是时候运行你的应用来验证一切是否正常工作：

英It’s now time to run your app to verify that everything works correctly:

# To run android
npm run android

# To run iOS
npm run ios

在 Metro 终端日志中，你现在将看到以下日志，以确认 Fabric 正在正确运行：

英In your Metro terminal log, you will now see the following log to confirm that Fabric is running correctly:

BUNDLE ./App.tsx
LOG Running "App" with {"fabric":true,"initialProps":{"concurrentRoot": "true"},"rootTag":1}

高级 - 在互操作层传递你的组件​

如果你按照前面的步骤操作，但你的应用使用了一些尚未完全迁移到新架构的自定义原生组件，你将看到一些红色/粉红色的框，表明该组件与 Fabric 不兼容。 发生这种情况是因为为旧架构编写的自定义原生组件无法在新架构中按原样运行。

英If you followed the previous steps but your app uses some custom Native Components that have not been migrated to the New Architecture completely, you are going to see some reddish/pinkish boxes saying that the component is not compatible with Fabric. This is happening because custom Native Components written for the legacy architecture can't run as-is in the New Architecture.

从 React Native 0.72.0 开始，我们致力于构建互操作性层，让你可以在新架构中使用旧组件，而无需等待它们迁移。

英Starting from React Native 0.72.0, we worked on a interoperability layer to let you use legacy components in the New Architecture without having to wait for them to be migrated.

你可以阅读有关互操作性层以及如何使用它的更多信息 here。 按照本指南注册你的组件，然后使用以下命令重新运行你的应用：

英You can read more about the interoperability layer and how to use it here. Follow this guide to register your components and then rerun your app with the commands:

# To run android
npm run android

# To run iOS
npm run ios