如何根据源数据在React Native中动态创建选项卡

Question

我知道如何使用react导航在react native中创建标签，例如以下代码：

const tabNavigator = createBottomTabNavigator(
  {
    First: firstTab,
    Second: secondTab,
    Third: thirdTab,
    Fourth: fourthTab,
  },
  {
    initialRouteName: 'First',
    tabBarOptions: {
      showLabel: false,
    },
  },
);

但是，通过这种方式，我需要事先知道要拥有多少个标签，并且需要为每个标签准备屏幕组件。

我想做的是根据我拥有的数据动态制作标签。

我有这个数据结构：

tabs = {
{id: 'first',
data: [ data1, data2, data3, data4 ]},

{id: 'second',
data: [ data5, data6, data7, data8 ]},

{id: 'third',
data: [ data9, data10, data11, data12 ]},

...
}

我希望有一个屏幕，其中包含基于tabs数据的标签，因此第一个标签的标题为“第一个”，第二个标签的标题为“第二个”，依此类推，每个标签都将显示数据。 / p>

有没有一种方法可以动态创建这些标签，并且仅准备一个屏幕“模板”来显示数据？