跳到主要内容
新架构实战课 实操 + 基建 + 原理全维度包揽,抢先掌握 React Native 新架构精髓 立即查看 >Version: Next

在应用中启用的预备工作

注意

这个文档仍然是实验性的,随着我们的迭代,细节会有变化。欢迎在工作小组内的讨论中分享你的反馈。

此外,它还包含几个手动步骤。请注意新架构尚未稳定下来,最终的开发者体验会继续迭代改善。我们正在努力开发工具、模板和库,以帮助你在新架构上快速入门,而不需要经历整个设置过程。

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

更新至最新版 React Native

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

本指南的撰写是基于你使用的是 最新发布的 React Native 版本

你可以在升级到新版本页面找到升级说明。

升级后记得重新安装依赖(运行npm installyarn)。

info

每当你需要重命名ios文件夹中的某些文件时,请使用 Xcode 重命名它们。这可确保 Xcode 工程中的文件引用也会更新。你可能需要先清理构建文件夹(ProjectClean Build FolderCmd ⌘ + Shift ⇪ + K),然后重新构建应用。如果文件是在 Xcode 之外重命名的,你可能需要点击旧的.m文件引用,并定位到新文件。

Android - 启用新架构

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

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

# 使用此属性启用对新架构的支持。
# 这将允许你在应用中使用TurboModules和Fabric渲染器。
# 如果你想编写自定义TurboModules/Fabric组件或使用提供它们的库,
# 你应该启用此标志。
-newArchEnabled=false
+newArchEnabled=true

iOS - 启用新架构

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

你只需通过运行带有正确标志的pod install来重新安装 pods:

# 运行带标志的pod install:
RCT_NEW_ARCH_ENABLED=1 bundle exec pod install

运行应用

现在是时候运行应用以验证一切正常了:

# 运行Android
npm run android

# 运行iOS
npm run ios

在你的 Metro 终端日志中,你现在会看到以下日志,确认 Fabric 正在正确运行:

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

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

如果你按照前面的步骤操作,但你的应用使用了一些尚未完全迁移到新架构的自定义本地组件,你会看到一些红色/粉色框,说明该组件与 Fabric 不兼容。这是因为为旧架构编写的自定义本地组件无法在新架构中原封不动地运行。

React Native 0.72.0开始,我们在互操作层上做了一些工作,让你不需要等待它们迁移到新架构的情况下,就可以在新架构中使用遗留组件。

你可以阅读更多关于互操作层及如何使用它的内容这里。按照该指南注册你的组件,然后使用以下命令重新运行应用:

# To run android
npm run android

# To run iOS
npm run ios