如何在React Native现有首页中添加自定义侧边菜单

我来帮你搞定这个需求！你当前用的是react-navigation 4.x版本，要实现自定义顶部栏的菜单按钮打开侧边抽屉，需要结合DrawerNavigator做嵌套导航，下面是一步步的实现方案：

1. 先安装抽屉导航依赖 #

你当前的依赖里缺少抽屉导航的包，先安装对应版本的react-navigation-drawer：

npm install react-navigation-drawer --save
# 或者用yarn安装
yarn add react-navigation-drawer

2. 创建自定义侧边菜单组件 #

新建一个SideMenu.js文件，编写你想要的侧边菜单内容：

import React from 'react';
import { View, Text, TouchableOpacity, StyleSheet } from 'react-native';
import Icon from 'react-native-vector-icons/Ionicons';

const SideMenu = ({ navigation }) => {
  return (
    <View style={styles.container}>
      {/* 菜单头部区域 */}
      <View style={styles.header}>
        <Text style={styles.headerText}>我的侧边菜单</Text>
      </View>
      {/* 菜单项列表 */}
      <TouchableOpacity 
        style={styles.menuItem}
        onPress={() => { /* 这里可以添加跳转或业务逻辑 */ }}
      >
        <Icon name="person-outline" size={20} style={styles.menuIcon} />
        <Text style={styles.menuText}>个人中心</Text>
      </TouchableOpacity>
      <TouchableOpacity 
        style={styles.menuItem}
        onPress={() => navigation.closeDrawer()}
      >
        <Icon name="close-outline" size={20} style={styles.menuIcon} />
        <Text style={styles.menuText}>关闭菜单</Text>
      </TouchableOpacity>
      {/* 可添加更多自定义菜单项 */}
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#fff',
  },
  header: {
    height: 100,
    backgroundColor: '#00bfff',
    alignItems: 'center',
    justifyContent: 'center',
  },
  headerText: {
    fontSize: 22,
    color: '#fff',
    fontWeight: 'bold',
  },
  menuItem: {
    flexDirection: 'row',
    alignItems: 'center',
    padding: 15,
    borderBottomWidth: 1,
    borderBottomColor: '#eee',
  },
  menuIcon: {
    marginRight: 15,
    color: '#00bfff',
  },
  menuText: {
    fontSize: 16,
  },
});

export default SideMenu;

3. 重构导航结构 #

原来的MainNavigator需要把Home页面替换成嵌套的DrawerNavigator，这样抽屉功能才能生效。修改你的导航配置代码：

import App from './App';
import { name as appName } from './app.json';
import { createAppContainer } from 'react-navigation';
import { createStackNavigator } from 'react-navigation-stack';
import { createDrawerNavigator } from 'react-navigation-drawer'; // 导入抽屉导航
import Splash from './src/components/Splash';
import Login from './src/components/Login';
import Home from './src/components/Home';
import SideMenu from './src/components/SideMenu'; // 导入侧边菜单组件

// 创建抽屉导航，包含Home页面和自定义侧边菜单
const HomeDrawerNavigator = createDrawerNavigator(
  {
    Home: { screen: Home },
    // 可添加其他需要在抽屉内跳转的页面
  },
  {
    contentComponent: SideMenu, // 指定自定义侧边菜单
    drawerWidth: 280, // 设置抽屉宽度
    navigationOptions: { header: null } // 继续隐藏默认头部，保留自定义顶部栏
  }
);

// 主栈导航包含闪屏、登录和嵌套的抽屉导航
const MainNavigator = createStackNavigator(
  {
    Splash: { screen: Splash },
    Login: { screen: Login },
    HomeDrawer: { screen: HomeDrawerNavigator } // 替换原来的Home为抽屉导航
  },
  {
    navigationOptions: { header: null }
  }
);

const Apps = createAppContainer(MainNavigator);
AppRegistry.registerComponent(appName, () => Apps);

4. 在Home页面绑定抽屉打开事件 #

修改你Home页面中菜单图标的TouchableOpacity点击事件，调用导航的openDrawer()方法：

<TouchableOpacity onPress={() => this.props.navigation.openDrawer()}>
  <Icon name="menu" size={25} color={'#00bfff'} style={styles.navItem} />
</TouchableOpacity>

关键说明 #

• 因为react-navigation 4.x的抽屉导航是独立包，必须嵌套在StackNavigator中，这样首页的navigation props才会包含openDrawer控制方法。
• 你自定义的顶部栏完全不受影响，只是通过点击按钮触发导航的抽屉控制逻辑。
• 若需要关闭抽屉，可在侧边菜单中调用navigation.closeDrawer()，或者用navigation.toggleDrawer()实现抽屉的切换效果。

这样就能实现点击自定义顶部栏的菜单图标打开侧边抽屉的需求啦！

内容的提问来源于stack exchange，提问作者Karthikeyan P