Создание динамического навигатора в React Native

Question

У меня есть три категории. Эту категорию определяют в переменной состояния. Теперь я хочу, чтобы эта категория отображалась в React Drawer Navigator.

Вот мой код

constructor(props)
    {
      super(props);
      this.state = {
        myCategory: [
          {
            category: 'Category1'
          },
          {
            category: 'Category2'
          },
          {
            category: 'Category3'
          }
        ]
      }
    }

    const MyDrawerNavigator = createDrawerNavigator({
     // display category

    });
const MainStack = createAppContainer(MyDrawerNavigator);

Answer 1

Текущая версия React Navigation имеет API статической конфигурации, что означает, что все настройки должны выполняться вне рендера.Это делает невозможным использование вариантов, таких как динамические навигаторы, до React Navigation 4.

React Navigation 5 имеет новый API-интерфейс на основе компонентов для настройки навигаторов, который делает возможными динамические навигаторы:

import { createDrawerNavigator } from '@react-navigation/drawer';

const Drawer = createDrawerNavigator();

export default function DrawerScreen() {
  const [categories, setCategories] = React.useState([
    'Category1',
    'Category2',
    'Category3',
  ]);

  return (
    <Drawer.Navigator>
      {categories.map(category => (
        <Drawer.Screen name={category} component={MyComponent} />
      ))}
    </Drawer.Navigator>
  );
}

Документация: https://reactnavigation.org/next

Имейте в виду, что React Navigation 5 все еще находится в альфа-режиме.