跳到主要内容

简化的导航性能分析

useProfiledNavigation

正如在 react-native-performance 文档 中提到的,你可以通过使用 useStartProfiler hook 开始分析与导航流程对应的渲染时间。然而,这通常意味着你需要进行两次调用来启动导航过程

  1. 通过 useStartProfiler hook 通知库流程的开始
  2. 通知你选择的导航库,你正在请求导航到给定的目标屏幕

如果你使用 react-navigation,我们提供了一个简单的包装 API,可以将这两个调用合并为一个调用。在原始的 useNavigation hook 上使用此包装 useProfiledNavigation hook 可能有助于确保你的应用程序中的所有导航流程都具有性能分析覆盖率

tsx
const ScreenA = ({navigation}) => {
const profiledNavigation = useProfiledNavigation();
return (
<>
{/* some JSX */}
<TouchableWithoutFeedback
onPress={uiEvent => {
profiledNavigation.navigate({source: 'ScreenA', uiEvent}, 'ScreenB');
}}
/>
</>
);
};
tsx
const ScreenA = ({navigation}) => {
const profiledNavigation = useProfiledNavigation();
return (
<>
{/* some JSX */}
<TouchableWithoutFeedback
onPress={uiEvent => {
profiledNavigation.navigate({source: 'ScreenA', uiEvent}, 'ScreenB');
}}
/>
</>
);
};

在上面的示例中,profiledNavigation.navigate 的第一个参数被传递给 startProfiler 函数(由 useStartProfiler hook 返回),而其余的 varargs 被发送到内部的 navigation.navigate 调用。