让我们总结一下 React Native 开源和博览会团队全年在 Software Mansion 上做出的所有新功能和其他贡献。

在这篇博文中，我们总结了我们维护的库中最重要的更新，包括复活、手势处理程序、屏幕和其他开源库，并分享了一些未来的计划。如果您不在 Twitter 上关注@swmansion，以下是您在 2022 年可能错过的内容。

迁移到新体系结构

我们 2022 年的第一个任务是使我们的库与新架构兼容。我们真的希望提前迁移我们的库，以便早期采用者可以在启用 Fabric 的情况下尽快使用它们。我们的动机是为社区的其他成员铺平道路并作为第三方代码的典范。每个图书馆都有自己独特的挑战需要克服：

react-native-screens——具有自定义状态的本机视图，自动链接，删除组件子树的反向顺序，与Paper 的向后兼容性
React-native-gesture-handler — 本机视图、视图扁平化检测、自动链接、向后兼容性
react-native-realive——通过C++ ShadowTree更新原生视图的道具，拦截UI线程上的原始事件，链接到React Native的共享库

任务结果是成功的，因为上述所有库分别从 3.12.0、2.3.0 和 3.0.0-rc.0 开始同时支持 Paper 和 Fabric。有关迁移过程本身的更多详细信息，请阅读我们关于将 Fabric 与 react-native-screens 集成的故事。

Reanimated 3 (复活 3)

5 月，我们宣布了 react-native-reanimated 的新主要版本。新版本的库与Reanimation 2代码完全兼容，并支持纸张和织物。但是，我们决定逐步停止对旧版 Reanimation 1 API 的支持，并依赖于从源代码构建，而不是为 Android 提供预构建的二进制文件。Reanimation 3 还包括布局动画和共享值的新实现，这些内容不会向后移植到 2.x 版本，因此请务必立即升级到 3.0.0-rc.10，或者在 2023 年第一季度发布 3.0.0-stable 版本后升级到 3.0.0-level。

App.js Conf 2022 (应用程序.js 会议 2022)

App.js Conf是由Software Mansion组织的以React Native&Expo为重点的会议。2022 年 6 月，我们汇集了来自世界各地的 330+ 开发人员，听取了 React Native 专业人士的 20 多场演讲，讨论了移动开发的现在和未来，并在派对后跳舞到早上。我们很高兴地宣布，App.js Conf 2023 将于 5 月 10 日至 12 日在波兰克拉科夫举行。加入我们，我们承诺提供比以前更好的体验！

React Native SVG maintenance (反应原生 SVG 维护)

2 月，我们决定承担自 2021 年 8 月以来几乎没有维护的 react-native-svg 库的责任。首先，我们合并了一些长期存在的 PR，修复了关键问题，清理了存储库，添加了示例应用，并改进了 CI 工作流。接下来，我们添加了 Fabric 支持，包括与 Meta 工程师合作的无桥模式和静态视图配置（尚未公布）的兼容性。除此之外，我们还统一了所有支持平台的颜色处理。112 个合并的拉取请求和 14 个版本之后，我们决定为库提供一个新的家，并将存储库移动到 GitHub 上的软件大厦命名空间下。

Layout Animations rewrite and bug fixes (布局动画重写和错误修复)

社区在 2022 年报告的很大一部分问题与使用布局动画时的各种不良副作用有关。在五月份，我们开始重构整个功能，包括消除本机端的内存泄漏，通过在C++端存储动画配置来减少本机到JS调用的数量，以及提高代码的整体质量和可读性。布局动画的新实现是在 3.0.0-rc.6 中发布的，从那时起，我们一直在积极致力于进一步的改进，所以请升级、测试并分享您的结果——非常感谢反馈。

Shared values rewrite (共享价值观改写)

我们在 2022 年重构的 Reactive 的另一个领域是支持整个库的核心机制，即共享值。重写的主要目的是解决根植于库C++部分的内存相关问题。由于代码库固有的复杂性，它们太难修复了。Realive的新核心显着优化了许多JSI往返调用（从而提高了整体性能），消除了使用数组或对象作为共享值时的内存泄漏（使共享值更加友好，特别是对于Hermes GC），并且还允许我们将来实现一些新的和经常请求的功能将来。虽然它在引擎盖下更改了很多东西，但它没有引入任何 API 更改，因此您的所有 Reanimation 代码都已经与 3.0.0-rc.8 中发布的新实现兼容。

Better stack traces in worklets (在工作日志中实现更好的堆栈跟踪)

除了稳定性和性能增强之外，Reanimation 3 还改进了开发人员在 Worklet 中处理错误的体验。这对于在调试模式下制作原型或开发动画特别有用。不可读的错误消息或无法解释的崩溃的日子已经一去不复返了，欢迎使用实际代码片段和适当的语法突出显示的精美堆栈跟踪。

New hooks in Reanimated(复活中的新钩子)

2022 年，除了维护和错误修复外，我们还设法为 Reanimated 提供了许多新功能。让我们从新引入的钩子的快速概述开始：

useAnimatedSensor — 允许您根据来自设备内传感器（如陀螺仪或加速度计）的数据轻松创建酷炫的交互式动画
useAnimatedKeyboard— 返回屏幕键盘的状态和高度作为共享值，允许根据当前键盘位置创建动画
useScrollViewOffset— 返回的偏移量，因为共享值可以经常使用，而不是Animated.ScrollView useAnimatedScrollHandler
useFrameCallback — 允许您注册要在每个动画帧上运行的工作集，可以强制启用或禁用

measure & scrollTo improvements(测量和滚动到改进)

在整个 9 月和 10 月，我们合并了一系列 PR，以提高 Realiveated 功能的整体稳定性和开发人员体验。简而言之，它允许您获取动画组件的当前布局指标（位置和大小）。从 3.0.0-rc.4 和 2.14.0 开始，它不会返回零甚至使整个应用程序崩溃，而是在无法进行此类测量时返回，例如，如果组件尚未挂载，它只是返回，希望 TypeScript 会提醒您也涵盖这种情况。我们还提供了缺少的Web实现以及功能，因此现在您可以放心地在所有平台和架构中使用！ measure null scrollTo measure

Better default color interpolation (更好的默认颜色插值)

Reanimation 内置支持以各种格式对颜色进行动画处理和插值，就像它们是常规值一样。以前，从红色到绿色或青色的动画会带你在整个彩虹中进行漫长但相当丰富多彩的旅程，但不幸的是，在大多数用例中，这实际上并不是想要的结果。从复活 3.0.0-rc.10 开始，您可以从 4 种不同的插值模式中进行选择，默认使用 gamma = 2.2 的 RGB，因为这种过渡在人眼看来最自然（查看我们文档中的交互式演示）。

Debugging Hermes worklet runtime (调试 Hermes worklet 运行时)

以前，调试worklet的唯一方法是使用Safari Developer Tools，它仅适用于运行JSC的iOS设备。如果您的应用在 Hermes 上运行，从 Reanimation 3.0.0-rc.3 开始，您可以直接使用 Chrome DevTools 调试 UI 运行时，也可以使用Reanimation Flipper Plugin。除了在 worklet 中设置断点和检查变量（包括共享值）之外，您还可以分析应用程序或拍摄内存快照。在文档中，我们还添加了一个部分，概述了流行的调试工具（请参阅文档）。chrome://inspect

Shared Element Transitions (共享元素过渡)

9 月，我们宣布我们正在开发社区最需要的功能之一，即在两个或多个屏幕之间启用组件动画，也称为共享元素过渡。借助简单但可定制的 API，开发人员可以通过流畅且令人愉悦的动画轻松增强他们的应用程序，这肯定会改善其应用程序的用户体验。引入共享元素过渡的 PR 正在审查中，我们真的希望很快在 Reanimation 3 中提供它，所以请继续关注更新。

New implementation of Gesture Handler for Web (Web 手势处理程序的新实现)

尽管 React Native 库主要针对 Android 和 iOS 等原生平台，但值得注意的是，Reanimation 和 Gesture Handler 也都带有 Web 支持，这意味着它们也可以在 react-native-web 项目中使用。以前，Web的Gesture Handler将使用hammer.js不幸的是，它不再维护（而且也有很多错误）。这就是为什么我们决定从 hammer 迁移.js转而直接使用 Web API，例如指针事件。您可以通过调用**（从 2.6.0 开始可用）来测试新版本。enableExperimentalWebImplementation

More improvements in Gesture Handler (手势处理程序中的更多改进)

在许多合并的 react-native-gesture-handler 拉取请求中，有一些功能和错误修复值得在这里提及。2022 年，我们改进了 Android 上的多点触控处理，为手势添加了修饰符，修复了嵌套按钮的声音效果，并添加了在可能不受支持的配置中使用时的警告，最后引入了一些新功能，如、、或按钮。runOnJS GestureDetector Pan.activateAfterLongPress touchSoundDisabled cancelsTouchesInView onLongPress

React Native Screens (反应原生屏幕)

如果你的应用将 React Navigation 与原生堆栈一起使用，那么你实际上会看到操作系统提供的原生导航组件，并通过 react-native-screen 向 React Native world 公开。今年，除了 Fabric 迁移和库的一般维护外，我们还公开了各种特定于平台的设置，例如过渡持续时间、滑动方向、手势响应距离和搜索栏色调颜色，并添加了对 iOS 止动器的支持。

React Navigation (反应导航)

谈到导航和屏幕，今年我们还为反应导航库做出了贡献。除了许多错误修复外，我们还将示例应用程序从经典更新迁移到 EAS，添加了对 prop 的支持，并实现了一个新的钩子，可用于推迟返回上一个屏幕，例如当用户有未保存的更改时。freezeOnBlur usePreventRemove()

React Native Radio #236 (反应原生电台 #236)

5月，

克日什托夫·马吉拉

受邀到React Native Radio谈论Reanimated。在这里查看完整剧集：

RNCK meet-ups (RNCK聚会)

每两三个月，Software Mansion 就会在我们位于波兰克拉科夫的办公室组织 React 原生社区聚会。2022 年，有 3 场聚会，所有聚会都是直播的，现在可以在我们的 YouTube 频道上观看。欢迎下次亲自或在线加入我们！

10 years of Software Mansion (软件大厦10年)

11月是公司成立10周年。

Migrating even more third-party libraries (迁移更多第三方库)

为了在 React Native 应用程序中启用 Fabric，应用程序中使用的每个自定义本机组件都必须支持 Fabric。目前，这是阻止开发人员使用新架构的主要障碍。在我们成功迁移 Reanimated、手势处理程序和屏幕后，凭借我们获得的所有知识和技能，我们开始搜索社区经常使用但尚未开始迁移过程的其他流行的第三方库。在此过程中存在许多技术挑战，但最终，我们设法将具有 Fabric 支持的完整拉取请求提交给以下库：

react-native-svg — 该库引入了许多可以嵌套的自定义本机视图，因此它并非易事，不仅因为 Paper 和 Fabric 在 iOS 上的 React Native 视图层次结构存在差异，而且在实现向后兼容性而不重复代码方面也是如此。
@Shopify/flash-list — 尽管这个库严重依赖仅限 JS 的 recyclerlistview，但它在第一次渲染期间使用自定义本机组件进行布局计算，幸运的是，迁移起来非常简单。然而，在Android上出现了一些性能问题，但经过一些挖掘和本机代码分析，结果发现这是与React Native本身的文本组件相关的回归，以及使用NDK 24编译的Hermes性能不佳。

Enabling Fabric in a real-world app (在实际应用中启用结构)

当涉及到新架构时，我们迁移所有库不仅仅是为了好玩。从一开始，我们的目标就是在实际的生产应用中启用 Fabric。实现该目标的一个很好的机会是在New Expensify应用程序中启用新架构。首先，我们确定了另外 5 个库，这些库提供了需要迁移的自定义本机视图：

一旦所有依赖项都准备就绪，就该拉动杠杆并在启用 Fabric 的情况下运行应用程序了，而且非常令人惊讶的是，它通常有效。显然，在不久的将来，仍然有一些小的不一致需要单独处理，但这对我们来说是一个巨大的飞跃。

下一步，我们计划将第三方依赖项提供的所有 NativeModules 迁移到使用 JSI（JavaScript 接口）而不是通过桥进行异步通信的 TurboModules。

Keeping up with React Native (跟上 React Native 的步伐)

2022 年最大的挑战之一是与新版本的 React Native 保持同步。强大的力量伴随着巨大的责任，我们觉得社区希望我们的库从第一天起就使用最新版本的框架，同时仍然保持对 0.64 等旧版本的支持和更新。在 2022 年，我们在兼容性方面确实很努力——但这并不容易，需要花费大量时间，尤其是对于与各种 React Native 内部结构紧密集成的 Resurd，而且更多的是关于新架构的。然而，由于与 Meta 人员的合作，我们设法克服了所有障碍，并始终按时完成。

Expo Modules API (世博会模块接口)

十一月，Software Mansion 的 Expo 团队发布了 Expo Modules API 的第一个稳定版本，该版本允许使用声明式开发人员友好的 DSL 在 Swift 和 Kotlin 中实现自定义原生模块和视图，而无需任何样板文件。此外，新的 API 与渲染器无关，因此所有 Expo 模块都可以开箱即用地使用 Fabric。下一步，该团队正在研究添加对类型化数组、类以及 SwiftUI 的支持。如果您对此听起来很有趣，请考虑在 App.js Conf 2023 期间参加由世博会模块 API 作者主办的世博会研讨会，让原生模块变得容易。

Expo Image (世博会图像)

在接下来的一个月里，Software Mansion的Expo团队宣布了一个新的库expo-image的alpha版本，该图像旨在替代react-native-fast-image，并使用Expo Modules API实现。新库还具有内置的模糊哈希支持、高效缓存、过渡和 Web 支持。稳定版本预计将很快作为SDK 48的一部分发布。有关更多详细信息，请查看世博会文档。

EAS Build and Submit & Dev Client

2022 年，Software Mansion 的世博会团队还致力于开发各种开发工具，包括世博会开发客户端、EAS 构建和 EAS 提交。有关更多详细信息，请查看世博会博客，并继续关注令人兴奋的新功能！

State of React Native (React Native 的状态)

12 月，Software Mansion 发起了第一版 State of React Native 调查，灵感来自流行的 JavaScript 状态。目前，调查已结束，但请继续关注结果，希望能为框架及其生态系统提供有价值的见解。另外，别忘了参加明年的2023年版！

结论

React Native & Expo 是我们开发移动应用程序的主要工具，看起来不会改变。我们的使命是使 React Native 成为一个更好的框架，我们很自豪能成为生态系统的一部分。我们要感谢 Shopify 赞助我们的开源计划，感谢 Expo 的良好合作伙伴关系，感谢 Meta 的 React Native 核心团队的指导和帮助，以及整个社区使用我们的库、报告问题和提交拉取请求。2022 年对于 React Native 及其开源来说是伟大的一年，我们迫不及待地想在 2023 年推出新功能。

2022 年总结 — 软件大厦的 React Native开源(翻译转载)