简化的导航性能分析
useProfiledNavigation
正如在 react-native-performance 文档 中提到的,你可以通过使用 useStartProfiler
hook 开始分析与导航流程对应的渲染时间。然而,这通常意味着你需要进行两次调用来启动导航过程
- 通过
useStartProfiler
hook 通知库流程的开始 - 通知你选择的导航库,你正在请求导航到给定的目标屏幕
如果你使用 react-navigation,我们提供了一个简单的包装 API,可以将这两个调用合并为一个调用。在原始的 useNavigation
hook 上使用此包装 useProfiledNavigation
hook 可能有助于确保你的应用程序中的所有导航流程都具有性能分析覆盖率
tsx
const ScreenA = ({navigation}) => {const profiledNavigation = useProfiledNavigation();return (<>{/* some JSX */}<TouchableWithoutFeedbackonPress={uiEvent => {profiledNavigation.navigate({source: 'ScreenA', uiEvent}, 'ScreenB');}}/></>);};
tsx
const ScreenA = ({navigation}) => {const profiledNavigation = useProfiledNavigation();return (<>{/* some JSX */}<TouchableWithoutFeedbackonPress={uiEvent => {profiledNavigation.navigate({source: 'ScreenA', uiEvent}, 'ScreenB');}}/></>);};
在上面的示例中,profiledNavigation.navigate
的第一个参数被传递给 startProfiler
函数(由 useStartProfiler
hook 返回),而其余的 varargs 被发送到内部的 navigation.navigate
调用。