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

Posted 2023-02-24

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

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的官方文档的建议完成了此操作。但无法获得动态的侧面菜单。

答案

您的SideMenu应该看起来像这样：

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

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

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 */

    </DrawerContentScrollView>
  );