抽屉物品顺序（React Native）答案

【问题标题】：Drawer Item Order (React Native)抽屉物品顺序（React Native）
【发布时间】：2021-04-24 22:42:39
【问题描述】：

这可能是一个非常愚蠢的问题，但我真的无法找到任何关于此的信息。我目前正在尝试做的是更改列表中项目的顺序。前两个导航到屏幕，后三个是自定义抽屉项目。我想要实现的是将“关于”项目移至抽屉底部，并在“Belval Navigator”和其余 3 个项目之间添加一些边距。

最后应该是这个样子 ->

贝尔瓦尔导航器

艺术

文化

科学

-

关于

import * as React from 'react';
import {
  createDrawerNavigator,
  DrawerContentScrollView,
  DrawerItemList,
  DrawerItem,
} from '@react-navigation/drawer';
import Navigation from '../config/Navigation';
import About from '../screens/AboutScreen';

const DrawerNavigator = createDrawerNavigator();

function CustomDrawerContent(props) {
  return (
    <DrawerContentScrollView {...props}>
      <DrawerItemList {...props} />
      <DrawerItem label="Art" onPress={() => alert('Toggle Art')} />
      <DrawerItem label="Culture" onPress={() => alert('Toggle Culture')} />
      <DrawerItem label="Science" onPress={() => alert('Toggle Science')} />
    </DrawerContentScrollView>
  );
}

export default function Drawer() {
  return (
    <DrawerNavigator.Navigator
      drawerContent={props => <CustomDrawerContent {...props} />}>
      <DrawerNavigator.Screen
        name="Belval Navigator"
        component={Navigation}
        options={() => ({
          swipeEnabled: false,
          drawerLabel: 'Belval Navigator',
        })}
      />
      <DrawerNavigator.Screen
        name="About"
        component={About}
        options={{swipeEnabled: true}}
      />
    </DrawerNavigator.Navigator>
  );
}

【问题讨论】：

标签： react-native navigation-drawer

【解决方案1】：

尝试在 drawerNavigator 中隐藏您的屏幕，然后将它们添加到 CustomDrawerContent：

首先通过向屏幕添加以下属性来隐藏屏幕：

      options={{ 
  drawerItemStyle: {
    height: 0
}}}
/>

然后在您的 CustomDrawerContent 中将屏幕添加为 DrawerItem 并使用 navigation.navigate 导航到它们：

 <DrawerItem label="Belval Navigator"  onPress={() => {props.navigation.navigate('Navigation')}}   />

现在只需根据您想要的顺序重新排序 CustomDrawerContent 中的抽屉项目。

【讨论】：