react-navigation-drawer - 如何在 react-navigation V5 中添加动态抽屉元素？

Question

我正在尝试向我的应用程序添加一个动态抽屉。

function CustomDrawerContent(props) {
  return (
    <SideMenu/>
  );
}

function DrawerStack() {
  return (
    <Drawer.Navigator
      initialRouteName="Home"
      drawerStyle={{
        backgroundColor: '#ffffff',
        width: metrices.DEVICE_WIDTH * 0.7,
      }}
      drawerContent={props => <CustomDrawerContent {...props} />}
      >
      <Drawer.Screen name="Home" component={Home} />
    </Drawer.Navigator>
  );
}

和之前的 react-navigation 一样，没有 contentComponent。所以我按照反应导航的官方文档的建议这样做了。但无法获得动态侧边菜单。

Answer 1

您的 SideMenu 应如下所示：

每一行都是一个 DrawerItem，你有一个来自官方网站的例子。

import {
  DrawerContentScrollView,
  DrawerItemList,
  DrawerItem
} from '@react-navigation/drawer'

function DynamicList(props) {
    const { elements } = props 
    return elements.map(element => (
        <DrawerItem
            key={emenet.key}
            label={element.label}
            onPress={element.onPress}
        />
    ))
}

function SideMenu(props) {
  return (
    <DrawerContentScrollView {...props}>
      <DrawerItemList {...props} />
      <DrawerItem
        label="Help"
        onPress={() => Linking.openUrl('https://mywebsite.com/help')}
      />

      {/* Here you can add as many as DrawerItems you want */}

      <DynamicList />
    </DrawerContentScrollView>
  );
}