跳转到主要内容

开始使用

@shopify/react-native-performance-navigation 包是 react-native-performance 的配套包。

它包含一些我们预计大多数应用程序会觉得有用的附加高阶分析器,以及 ReactNavigationPerformanceView,它构建在 vanilla PerformanceMeasureView 之上,并针对 React Navigation 库进行了优化。

此包有两个目标

  • 提供应用程序可直接使用的实用程序,或
  • 提供代码参考,展示如何基于 react-native-performance 提供的基础模块构建自定义分析器。
    • 如果您的应用程序使用的对等依赖项版本与此包声明的不同,您可以调整提供的实现以使其适用于您,直到您可以迁移。

请注意,还有其他辅助包可与 React Navigation 库一起使用

安装

您可以通过运行以下命令安装该软件包

bash
yarn add @shopify/react-native-performance-navigation
bash
yarn add @shopify/react-native-performance-navigation

请注意,此包具有以下应在您的应用程序 package.json 中列出的对等依赖项

bash
yarn add @react-navigation/core @react-navigation/stack @react-navigation/native @shopify/react-native-performance
bash
yarn add @react-navigation/core @react-navigation/stack @react-navigation/native @shopify/react-native-performance

ReactNavigationPerformanceView

如前所述,ReactNavigationPerformanceView 作为 PerformanceMeasureView 的替代品与 react-navigation 一起使用。它的 API 是相同的,但是,它有一个名为 transition-end 的新渲染过程,并影响何时将 interactive 设置为 true。每当屏幕 A 和屏幕 B 之间发生导航转换时,ReactNavigationPerformanceView 确保在转换成功完成之前,屏幕 B 不会被标记为 interactive - 这是因为目标屏幕在转换期间本身不是交互式的。在转换结束后,您将看到另一个名称为 transition-end 的渲染过程事件。通过此事件,屏幕也可以被认为是 interactive 的(但它不必是,取决于您的用例)。