Как динамически создавать вкладки в реагировать родной в зависимости от исходных данных

Question

Я знаю, как создавать вкладки в реагирующем языке, используя реагирующую навигацию, как показано в следующем коде:

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 данных, поэтому первая вкладка будет называться «первая», вторая вкладка «вторая» и т. Д., И каждая будет отображать данные.

Есть ли способ динамически создавать эти вкладки и подготовить только один экранный «шаблон» для отображения данных?