react-native-performance-navigation-bottom-tabs

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

安装

你可以通过运行以下命令来安装此包

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

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

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

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

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

用法

createProfiledBottomTabNavigator

此实用程序包装了标准的 createBottomTabNavigator，并允许你分析渲染不同选项卡中托管的屏幕所花费的时间。

在分析不同选项卡的渲染时间时，存在一定的复杂性。一旦打开一个选项卡，如果你重新访问它，它可能会保留在内存中，而不会导致重新渲染。 createProfiledBottomTabNavigator 会考虑这种情况。

tsx
const {Tab, buildProfiledBottomTabBarButton} = createProfiledBottomTabNavigator();
const TabNavigator = () => {
  return (
    <Tab.Navigator>
      <Tab.Screen
        name={NavigationKeys.TAB_NAVIGATOR_SCREEN_1}
        component={TabScreen1}
        options={{
          tabBarButton: buildProfiledBottomTabBarButton(),
        }}
      />
      <Tab.Screen
        name={NavigationKeys.TAB_NAVIGATOR_SCREEN_2}
        component={TabScreen2}
        options={{
          // buildProfiledBottomTabBarButton can optionally receive a `Touchable` prop
          // if you want to use something other than TouchableWithoutFeedback
          tabBarButton: buildProfiledBottomTabBarButton(),
        }}
      />
    </Tab.Navigator>
  );
};

tsx
const {Tab, buildProfiledBottomTabBarButton} = createProfiledBottomTabNavigator();
const TabNavigator = () => {
  return (
    <Tab.Navigator>
      <Tab.Screen
        name={NavigationKeys.TAB_NAVIGATOR_SCREEN_1}
        component={TabScreen1}
        options={{
          tabBarButton: buildProfiledBottomTabBarButton(),
        }}
      />
      <Tab.Screen
        name={NavigationKeys.TAB_NAVIGATOR_SCREEN_2}
        component={TabScreen2}
        options={{
          // buildProfiledBottomTabBarButton can optionally receive a `Touchable` prop
          // if you want to use something other than TouchableWithoutFeedback
          tabBarButton: buildProfiledBottomTabBarButton(),
        }}
      />
    </Tab.Navigator>
  );
};