时间戳

首页 > 解决方案 > 如何使用 react-navigation v5 在 react-native 中创建自定义导航抽屉？

react-native - 如何使用 react-navigation v5 在 react-native 中创建自定义导航抽屉？

问题描述

我希望创建一个自定义抽屉导航器，其中包含一些可扩展的列表视图和一些隐藏的路线。

例如

家

主要1

隐藏 1

藏了一个

隐藏 b

隐藏 2

藏了一个

隐藏 b

其中 hid a 和 hid b 将隐藏在 hidden 1 或 hidden 2 后面。当单击或触摸 hidden 1 或 hidden 2 时，将显示 hid a/hid b。

这是我目前所拥有的——

主.js：

export default function MainScreen({ navigation }){
  
  return (
    <NavigationContainer>
      <Drawer.Navigator initialRouteName='Home' drawerContent={props => <Menu {... props} />}>
        <Drawer.Screen name=".." options={{drawerIcon: config => <Icon name=".." size={22} color="#000"></Icon>}} component={HomeScreen} />
        <Drawer.Screen name="Ex1" component={Ex1} />
        <Drawer.Screen name="Ex2" component={Ex2} />
        <Drawer.Screen name="Ex3" component={Ex3} />
        <Drawer.Screen name="Ex4" component={Ex4} />
        <Drawer.Screen name="Ex5" component={Ex5} options={{
            title:"..",
            drawerIcon: config => <Icon
                size={22}
                name='..'></Icon>
        }} />
      </Drawer.Navigator>
    </NavigationContainer>
  )
}

菜单.js：

const Menu = (props) => {

  return (
    <SafeAreaView style={{flex: 1}}>
      <DrawerContentScrollView {...props}>
        <DrawerItemList {...props} />
        
      </DrawerContentScrollView>

    </SafeAreaView>
  );
};

而且我正在寻找拆分 DrawerItemList 以便我可以在下拉列表中显示我的一些路线。

上面示例中的大部分代码已经过清理，因为其中很多是商业敏感的，但我可以向您保证，我的组件名称等在实际代码中要好得多。

任何建议或意见将不胜感激。

我刚刚开始使用 react-native，所以对我来说很赤裸裸。

如果您需要更多信息，请随时发表评论和询问。

提前致谢。

标签： react-nativefrontendnavigation-drawerreact-navigation-drawer

解决方案

解决方案是使用 @eliav2/react-native-collapsible-view 作为内部有 DrawerItems 的可折叠视图。

推荐阅读