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，这意味着所有配置都必须在render外部完成。这使得诸如React Navigator 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仍处于Alpha状态。

在React Native中创建Dynamic Drawer Navigator

1 个答案: