React Native：Material Bottom Tab Navigator中SVG无法加载

在使用createMaterialBottomTabNavigator时，给<Tab.Screen>的options传入自定义SVG组件作为tabBarIcon，但在Android模拟器中图标显示空白。相关代码如下：

Footer导航组件代码 #

import { createMaterialBottomTabNavigator } from "react-native-paper/react-navigation";
import HamburgerIcon from '../assets/navFooter/HamburgerIcon.js'
import Hamburger from "./Hamburger";
import { SvgUri, SvgXml } from 'react-native-svg';

const Tab = createMaterialBottomTabNavigator()

export default function Footer() {
  return (
    <Tab.Navigator
      initialRouteName="Home"
      barStyle={{
        backgroundColor: 'red'
      }}
    >
      <Tab.Screen 
        name='Hamburger'
        component={Hamburger}
        options={{
          tabBarIcon : <HamburgerIcon />,
          tabBarLabel: ''
        }}
      />
      {/* 其他Tab.Screen */}
    </Tab.Navigator>
  )
}

自定义SVG组件HamburgerIcon.js代码 #

import Svg, { Path } from "react-native-svg";

export default function HamburgerIcon() {
    return (
        <Svg width="24" height="24" viewBox="0 0 24 24">
            <Path d="M2 2H32M2 12.5H32M2 23H32" stroke="white" stroke-width="3" stroke-linecap="round" stroke-linejoin="round" />
        </Svg>
    )
}

解决方法 #

• 修正SVG路径范围：SVG的viewBox设置为0 0 24 24，但路径中使用了H32，超出了视图边界，导致图标被完全裁切。将路径中的32改为小于24的数值，比如22：

  <Path d="M2 2H22M2 12.5H22M2 23H22" stroke="white" stroke-width="3" stroke-linecap="round" stroke-linejoin="round" />
  

• 调整tabBarIcon的写法：material-bottom-tab-navigator的tabBarIcon要求传入一个返回组件的函数，而非直接传入组件实例，修改options中的配置：

  options={{
    tabBarIcon: () => <HamburgerIcon />,
    tabBarLabel: ''
  }}
  

• 确认react-native-svg配置：确保Android项目已正确配置react-native-svg，RN 0.60+版本会自动链接，但可检查android/app/build.gradle中是否包含相关依赖，若未自动链接，执行npx react-native link react-native-svg后重新编译项目。

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