React Navigation V2：如何实现带不同分区的自定义抽屉菜单？

嘿，要实现你想要的抽屉分区效果其实不难，React Navigation V2允许我们完全自定义抽屉的内容组件，通过这个特性就能轻松做出分区样式。下面是具体的实现步骤和代码示例：

核心思路 #

React Navigation V2的默认抽屉是平铺的列表，要分区的话，我们需要自定义抽屉内容组件（通过contentComponent配置项），在这个组件里手动划分不同的区块，每个区块包含标题和对应的导航项。

步骤1：自定义抽屉内容组件 #

我们可以利用官方提供的DrawerItems组件来处理导航项的跳转逻辑，同时自己拆分导航项到不同分区，再加上标题和样式。

import React from 'react';
import { View, Text, StyleSheet } from 'react-native';
import { DrawerItems } from 'react-navigation';

const CustomDrawerContent = (props) => {
  // 根据路由名称把导航项拆分成两个分区
  const mainNavigationItems = props.items.filter(item => 
    ['Home', 'Profile', 'Messages'].includes(item.routeName)
  );
  const settingsNavigationItems = props.items.filter(item => 
    ['Settings', 'Help', 'Logout'].includes(item.routeName)
  );

  return (
    <View style={styles.drawerContainer}>
      {/* 第一个分区：核心功能区 */}
      <View style={styles.sectionWrapper}>
        <Text style={styles.sectionTitle}>Main</Text>
        <DrawerItems 
          {...props}
          items={mainNavigationItems}
          activeTintColor="#1677ff"
          inactiveTintColor="#333"
          style={styles.sectionItems}
        />
      </View>

      {/* 第二个分区：设置功能区 */}
      <View style={styles.sectionWrapper}>
        <Text style={styles.sectionTitle}>Settings</Text>
        <DrawerItems 
          {...props}
          items={settingsNavigationItems}
          activeTintColor="#1677ff"
          inactiveTintColor="#333"
          style={styles.sectionItems}
        />
      </View>
    </View>
  );
};

// 自定义样式，根据你的需求调整
const styles = StyleSheet.create({
  drawerContainer: {
    flex: 1,
    paddingTop: 20, // 避开状态栏
  },
  sectionWrapper: {
    marginBottom: 25,
    paddingHorizontal: 15,
  },
  sectionTitle: {
    fontSize: 14,
    color: '#999',
    marginBottom: 10,
    fontWeight: '600',
    textTransform: 'uppercase',
  },
  sectionItems: {
    borderTopWidth: 0, // 移除默认的顶部边框，避免分区之间出现多余线条
  },
});

export default CustomDrawerContent;

步骤2：配置DrawerNavigator #

在创建抽屉导航器的时候，把contentComponent设置为我们刚才自定义的组件即可：

import { DrawerNavigator } from 'react-navigation';
import CustomDrawerContent from './CustomDrawerContent';

// 导入你的各个页面组件
import HomeScreen from './screens/HomeScreen';
import ProfileScreen from './screens/ProfileScreen';
import MessagesScreen from './screens/MessagesScreen';
import SettingsScreen from './screens/SettingsScreen';
import HelpScreen from './screens/HelpScreen';
import LogoutScreen from './screens/LogoutScreen';

const AppDrawer = DrawerNavigator(
  {
    // 定义你的路由
    Home: { screen: HomeScreen },
    Profile: { screen: ProfileScreen },
    Messages: { screen: MessagesScreen },
    Settings: { screen: SettingsScreen },
    Help: { screen: HelpScreen },
    Logout: { screen: LogoutScreen },
  },
  {
    contentComponent: CustomDrawerContent,
    drawerWidth: 280, // 抽屉宽度，按需调整
    // 其他抽屉配置项...
  }
);

export default AppDrawer;

额外技巧 #

• 如果想要更灵活的导航项样式，可以不用DrawerItems，自己用TouchableOpacity写每个导航项，通过props.navigation.navigate(routeName)来处理跳转。
• 可以在分区之间添加分割线，比如在sectionWrapper里加borderBottomWidth: 1, borderBottomColor: '#eee'来区分区块。
• 注意React Navigation V2的DrawerItems是从react-navigation包导入的，和后续版本的导入路径不同，别搞错了。

内容的提问来源于stack exchange，提问作者Jedd Man