本文由 简悦SimpRead 转码，原文地址 blog.swmansion.com
在这篇文章中，我们讨论了如何将react-native-screens迁移到Fabric上，以及如何在y...... 上使用它。
如果你关注React Native世界的新闻，你肯定听说过Fabric--新的React Native架构。它已经在Facebook内部使用了相当长的一段时间，现在核心团队决定解决其更广泛的、开源的采用。随着React Native 0.68版本的发布，切换到新的架构将像在你的项目中翻转一个常量一样容易，这将最终使任何人都可以轻松地尝试它。然而，迁移到Fabric可能不是每个人都能从零开始，因为许多React Native项目依赖于额外的库，这些库也需要适应新的架构。这与提供额外的系统原生功能或暴露平台特定的原生组件的库特别相关。我们希望看到在最受欢迎的React Native社区项目中大力推动对Fabric的采用。作为Software Mansion--许多流行的React Native库的作者，我们想宣布我们对移植我们所维护的项目的承诺，并以身作则地领导Fabric的采用工作，以便尽快为每个React Native应用程序启用新架构。
今天，我们发布了与Fabric兼容的react-native-screens库的第一个版本。这不仅是这个非常受欢迎的项目的第一个Fabric兼容版本（安装频率是NPM的react-native的70%），而且是第一个与新的React Native架构兼容的本地组件库。在这篇文章中，我们讨论了如何将现有的本地代码库移植到Fabric，并介绍了我们的方法。如果你对新架构感兴趣，我们还介绍了你今天如何在你的第一个Fabric应用中使用react-native-screens。最后，如果你自己维护了一个React Native包，我们希望这篇文章能激励你去研究将其迁移到Fabric，并让你对这个过程有一个很好的了解--为此，我们分享了代码修改的链接和解决迁移的特定部分的PR。如果你 "偷 "了项目配置和我们在这里提出的想法，以便让其他库为Fabric做好准备，我们会很高兴。
最新的React Native的候选版本（0.68）允许你翻转开关，在你的项目中启用Fabric架构。这种设置的目的是帮助使迁移到Fabric的过程增量化。愿意升级React Native版本的人可以安全地这样做，而不必真正考虑Fabric。一旦应用程序（包括其依赖关系）为新架构做好准备，就可以为他们的项目打开。React Native核心同时支持新旧架构。然而，作为一个结果，这也是库应该处理的方式。如果我们想实现无缝过渡，现有的包应该提供类似的兼容性。这正是react-native-screens库的3.12版本的准备情况。你可以通过旧的架构在任何兼容的React Native版本中使用它，或者你可以在0.68的React Native应用中翻开新的架构开关，通过Fabric使用它。
最容易上手的方法
为了测试react-native-screens在新旧架构下的实现，我们在GitHub主库中创建了一个配置了Fabric的应用实例。测试它的最简单方法是，从GitHub上拉出react-native-screens，并按照 repo中FabricExample文件夹中的说明进行操作。
使用 react-native-screens 制作你的第一个 Fabric 应用
如前所述，开启Fabric就像在构建应用之前翻转一个标志一样简单。你可以在将你现有的应用升级到0.68后尝试一下，但下面我们将描述创建一个新的react-native项目的过程。
- 使用React Native CLI创建新的应用程序：
npx react-native init NewRN68App --version 0.68.0-rc.1。 - 像往常一样添加 react-native-screens:
yarn add react-native-screens。 - 现在，为了在iOS上启用Fabric，你需要在
ios文件夹中运行RCT_NEW_ARCH_ENABLED=1 pod install。 - 对于Android，你需要在
android/gradle.properties中改变newArchEnabled=true。 - 现在你可以像往常一样在Android和iOS上构建应用程序。已安装的屏幕版本将自动检测是否启用了Fabric，并将提供适当的实现。
注意，react-native-screens的Fabric实现还不支持所有的可用属性。如果你想知道这是为什么，请继续阅读下一节。
在架构层面上，Fabric引入了一个新的接口，供JavaScript代码与原生核心交互。本机和JS组件之间的所有通信都是通过JSI（用于与JS VM交互的C++ API）完成的，而不是使用桥接。从一方到另一方的信息是使用C++函数传输的，而不是为了在桥上传递而进行序列化/反序列化的。正因为如此，旨在支持新架构的库需要适应这个新的接口。当你想建立一个全新的库或一套本地组件时，使用它是相对直接的（我们将在后面讨论一些细节），然而，将Fabric适应于现有的库会带来一些额外的挑战。具体来说，我们希望能够同时支持Fabric和非Fabric版本，在这两种实现之间尽可能多地共享代码。这将使我们能够改进库和修复bug，并在这样做的同时，为能够迁移到Fabric的人和不能迁移的人提供同等水平的支持。
下面，我们讨论一下现有库的迁移过程的主要步骤。我们的目标是能够发布一个单一版本的库，它可以与Fabric和旧的RN架构一起工作，而不需要为用户进行额外的设置--也就是说，我们唯一期望的是应用程序指定它是否应该与Fabric一起构建，并在此基础上提供一个适当的库配置。
我们做的第一件事是用Flow--一种JS的方言--编写组件规范。这段代码是应用程序的真理之源。它提供了在本地和JS方面使用的规范。这段代码也被用来生成本地实现，从而确保两者之间的类型安全。接下来，我们转换了一些本地代码，使其能与Fabric很好地工作。在这一步，我们添加了处理道具和事件的实现。在Android上，代码库在新旧架构之间是共享的。在iOS上，我们需要创建新的文件，从而使两个实现独立。为了保持库与两个架构的兼容，我们有一些文件/类是特定于某个架构的。在某些情况下，我们决定将代码的一小部分与架构检查分开，因为有时对我们来说，共享一个给定文件或类的大部分，只拥有小的特定架构片段更有意义--我们在JS和本地代码库中都是这样做的。
对我们来说，迁移的过程是渐进的。我们从实现Screens的基本功能开始，并决定以后增加更多的功能。现在，我们已经发布了一个最小版本的库，我们将专注于使所有的功能与Fabric兼容。
如果你想更深入地了解我们的变化，我们把它们分为几个PR。
由于这是我们今年的第一个大版本，我们想利用这个机会感谢Shopify对我们React Native相关工作的帮助。我们连续第三年合作，通过建立和维护基本的开源库来改善React Native生态系统。今年的主要目标之一是使新架构得到更广泛的采用，而这次react-native-screens库的发布只是我们在这个方向上迈出的第一步，感谢Shopify的支持。
react-native-screens的Fabric兼容版本的发布是社区适应新的React Native架构道路上的一个重要里程碑。我们希望有更多的库维护者跟进，并乐于分享我们的经验来实现这一目标。如果你维护一个库或计划将你的项目迁移到Fabric，不要犹豫，请与我们联系 Software Mansion的开源团队致力于在不久的将来移植我们目前维护的所有库，所以请继续关注更多更新，并确保在Twitter上关注我们。
