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>
  );
}

与先前的反应导航一样，没有contentComponent。所以我已经按照React Navigation的官方文档的建议完成了此操作。但无法获得动态的侧面菜单。

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>
  );
}

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

1 个答案: