跳到主要内容

react-native-performance-navigation-drawer

在 @shopify/react-native-performance-navigation 之上的扩展库，为 @react-navigation/drawer 库提供了额外的辅助方法。

安装​

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

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

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

bash
yarn add @react-navigation/core @react-navigation/stack @react-navigation/native @react-navigation/drawer-tabs @shopify/react-native-performance @shopify/react-native-performance-navigation react-native-reanimated react-native-gesture-handler
bash
yarn add @react-navigation/core @react-navigation/stack @react-navigation/native @react-navigation/drawer-tabs @shopify/react-native-performance @shopify/react-native-performance-navigation react-native-reanimated react-native-gesture-handler

用法​

createProfiledDrawerNavigator​

此实用程序包装了标准的 createDrawerNavigator，并允许您分析渲染不同标签页内托管的屏幕所花费的时间。

在分析不同标签页的渲染时间时存在一些复杂性。一旦打开某个标签页，如果您重新访问它，它可能会保留在内存中，而不会导致重新渲染。 createProfiledDrawerNavigator 考虑到了这种情况。

tsx
const Drawer = createProfiledDrawerNavigator();
const DrawerNavigator = () => {
  return (
    <Drawer.Navigator>
      <Drawer.Screen name={NavigationKeys.DRAWER_NAVIGATOR_SCREEN_1} component={TabScreen1} />
      <Drawer.Screen name={NavigationKeys.DRAWER_NAVIGATOR_SCREEN_2} component={TabScreen2} />
    </Drawer.Navigator>
  );
};
tsx
const Drawer = createProfiledDrawerNavigator();
const DrawerNavigator = () => {
  return (
    <Drawer.Navigator>
      <Drawer.Screen name={NavigationKeys.DRAWER_NAVIGATOR_SCREEN_1} component={TabScreen1} />
      <Drawer.Screen name={NavigationKeys.DRAWER_NAVIGATOR_SCREEN_2} component={TabScreen2} />
    </Drawer.Navigator>
  );
};