react-native - 添加动态标签导航屏幕的正确方法：createMaterialTopTabNavigator

Question

代码工作得很好。我只想知道这是否是正确的做法。

我想要基于数组中的值的选项卡，所以我这样做了：

import React from "react";
import { createMaterialTopTabNavigator } from "@react-navigation/material-top-tabs";

const Tab = createMaterialTopTabNavigator();

function ProductListNavigator({ route }) {
  const { subCategories, selectedSubcategory } = route.params;
  return (
    <Tab.Navigator
      lazy={true}
      lazyPreloadDistance={3}
    >
      {subCategories.map((subCategory) => (
        <Tab.Screen
          key={subCategory.id}
          name={subCategory.name}
          component={AppProductList}
          options={{ tabBarLabel: subCategory.name }}
          initialParams={{ subCategory }}
        />
      ))}
    </Tab.Navigator>
  );
}

export default ProductListNavigator;

这会低效吗？或者有更好的方法吗？

我正在使用 React 导航 v5

标签： react-nativereact-navigation-v5