如何为react-native-hamburger设置本地自定义SVG图标

要实现自定义本地SVG作为汉堡菜单图标，你可以摆脱react-native-hamburger的预定义样式限制，自己封装一个轻量的状态切换组件，具体步骤如下：

1. 准备SVG渲染依赖 #

首先确保项目支持本地SVG渲染，安装react-native-svg：

npm install react-native-svg --save
# iOS 项目需额外执行 pod 安装
cd ios && pod install && cd ..

如果想直接导入SVG文件而非手动处理XML字符串，可以安装babel插件简化流程：

npm install babel-plugin-inline-react-svg --save-dev

然后在项目根目录的babel.config.js中添加插件配置：

module.exports = {
  presets: ['module:metro-react-native-babel-preset'],
  plugins: ['inline-react-svg'] // 新增这一行
};

2. 封装自定义汉堡图标组件 #

把你的本地SVG文件（比如menu-closed.svg和menu-open.svg）放到项目的assets/svg目录下，创建自定义组件：

import React from 'react';
import { TouchableOpacity } from 'react-native';
// 直接导入本地SVG文件（依赖上面的babel插件）
import MenuClosedIcon from '../assets/svg/menu-closed.svg';
import MenuOpenIcon from '../assets/svg/menu-open.svg';

const CustomHamburger = ({ active, onPress }) => {
  return (
    {/* 增加hitSlop扩大点击区域，提升交互体验 */}
    <TouchableOpacity 
      onPress={onPress} 
      hitSlop={{ top: 10, bottom: 10, left: 10, right: 10 }}
    >
      {/* 根据active状态切换显示不同SVG */}
      {active ? (
        <MenuOpenIcon width={24} height={24} fill="#333" />
      ) : (
        <MenuClosedIcon width={24} height={24} fill="#333" />
      )}
    </TouchableOpacity>
  );
};

export default CustomHamburger;

如果不想用babel插件，也可以手动处理SVG的XML字符串：
比如创建menu-closed-svg.js文件存储SVG代码：

export default `
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
  <path d="M3 18h18v-2H3v2zm0-5h18v-2H3v2zm0-7v2h18V6H3z"/>
</svg>
`;

然后组件里用SvgXml渲染：

import { SvgXml } from 'react-native-svg';
import menuClosedXml from '../assets/svg/menu-closed-svg';
import menuOpenXml from '../assets/svg/menu-open-svg';

// 组件内部替换为：
<SvgXml 
  xml={active ? menuOpenXml : menuClosedXml} 
  width={24} 
  height={24} 
  fill="#333"
/>

3. 在原有代码中替换组件 #

把原来的Hamburger组件替换成我们自定义的CustomHamburger：

<Drawer some_styles>
  <View>
    <CustomHamburger 
      active={this.state.menuActive} 
      onPress={this._handleMenuButtonPress}
    />
  </View>
</Drawer>

这种方式完全由你控制图标的样式、大小和切换逻辑，比依赖第三方库更灵活，也能完美适配你的本地SVG资源。

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