React Native底部导航栏自定义激活图标被截断，如何解决？

问题描述 #

在使用React Navigation的底部Tab导航时，自定义PNG图标出现激活状态截断的情况：未激活图标显示正常，但宽度较大的激活态图标会被裁切。尝试将图标放入View组件、设置全屏宽度后仍未解决。

原代码 #

import React from 'react';
import CardScreen from './authenticated/CardScreen';
import HomeScreen from './authenticated/HomeScreen';
import MoreScreen from './authenticated/MoreScreen';
import RewardsScreen from './authenticated/RewardsScreen';
import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';
import { StyleSheet } from 'react-native';
import { Image, View } from 'react-native';
const Tab = createBottomTabNavigator();
const Authenticated = () => {
  return (
    <Tab.Navigator
      screenOptions={({ route }) => ({
        tabBarIcon: ({ focused, size }) => {
          let iconName;
          if (route.name === 'Home') {
            iconName = focused
              ? require('../../assets/home-icon-active.png')
              : require('../../assets/home-icon-inactive.png');
          } else if (route.name === 'Rewards') {
            iconName = focused
              ? require('../../assets/rewards-icon-active.png')
              : require('../../assets/rewards-icon-inactive.png');
          } else if (route.name === 'Card') {
            iconName = focused
              ? require('../../assets/card-icon-active.png')
              : require('../../assets/card-icon-inactive.png');
          } else if (route.name === 'More') {
            iconName = focused
              ? require('../../assets/more-icon-active.png')
              : require('../../assets/more-icon-inactive.png');
          }
          return (
            <View style={styles.icon}>
              <Image source={iconName} style={{ width: size, height: size }} />
            </View>
          );
        },
        tabBarLabelPosition: 'beside-icon',
        tabBarStyle: {
          backgroundColor: '#000000',
        },
        tabBarActiveTintColor: '#CBFF3D',
        tabBarInactiveTintColor: '#FFFFFF',
        tabBarShowLabel: false,
      })}
    >
      <Tab.Screen name="Home" component={HomeScreen} />
      <Tab.Screen name="Rewards" component={RewardsScreen} />
      <Tab.Screen name="Card" component={CardScreen} />
      <Tab.Screen name="More" component={MoreScreen} />
    </Tab.Navigator>
  );
};
const styles = StyleSheet.create({
  icon: {
    flex: 1,
    width:100,
    alignItems: 'center',
    justifyContent: 'center',
  },
});
export default Authenticated;

解决方法 #

核心原因 #

Tab导航的每个tab项容器默认有宽度限制，且强制给Image设置宽高相等（width: size, height: size）会让非正方形的激活态图标被拉伸或裁切，外层View的width:100会被Tab导航的内部布局覆盖，无法生效。

方案1：给Tab项容器分配足够宽度 #

在screenOptions中添加tabBarItemStyle，给每个tab项设置足够宽度，确保图标有足够显示空间：

tabBarItemStyle: {
  width: 80, // 可根据图标实际宽度调整
},

方案2：调整Image的显示模式 #

去掉强制的宽高相等设置，改用resizeMode: 'contain'让图标按比例完整显示，同时限制最大尺寸：

// 修改tabBarIcon中的Image部分
<Image 
  source={iconName} 
  style={{ 
    maxWidth: size * 1.5, // 激活态图标可适当放宽，根据实际情况调整
    maxHeight: size,
    resizeMode: 'contain'
  }} 
/>

方案3：动态适配激活态图标尺寸 #

根据激活状态动态调整图标宽高比例，同时配合容器宽度设置：

tabBarIcon: ({ focused, size }) => {
  let iconName;
  // ... 原有图标判断逻辑
  return (
    <Image 
      source={iconName} 
      style={{ 
        width: focused ? size * 1.2 : size,
        height: size,
        resizeMode: 'contain'
      }} 
    />
  );
},
tabBarItemStyle: {
  width: 80,
},

修改后的完整代码示例 #

import React from 'react';
import CardScreen from './authenticated/CardScreen';
import HomeScreen from './authenticated/HomeScreen';
import MoreScreen from './authenticated/MoreScreen';
import RewardsScreen from './authenticated/RewardsScreen';
import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';
import { Image } from 'react-native';
const Tab = createBottomTabNavigator();
const Authenticated = () => {
  return (
    <Tab.Navigator
      screenOptions={({ route }) => ({
        tabBarIcon: ({ focused, size }) => {
          let iconName;
          if (route.name === 'Home') {
            iconName = focused
              ? require('../../assets/home-icon-active.png')
              : require('../../assets/home-icon-inactive.png');
          } else if (route.name === 'Rewards') {
            iconName = focused
              ? require('../../assets/rewards-icon-active.png')
              : require('../../assets/rewards-icon-inactive.png');
          } else if (route.name === 'Card') {
            iconName = focused
              ? require('../../assets/card-icon-active.png')
              : require('../../assets/card-icon-inactive.png');
          } else if (route.name === 'More') {
            iconName = focused
              ? require('../../assets/more-icon-active.png')
              : require('../../assets/more-icon-inactive.png');
          }
          return (
            <Image 
              source={iconName} 
              style={{ 
                width: focused ? size * 1.2 : size,
                height: size,
                resizeMode: 'contain'
              }} 
            />
          );
        },
        tabBarLabelPosition: 'beside-icon',
        tabBarStyle: {
          backgroundColor: '#000000',
        },
        tabBarItemStyle: {
          width: 80,
        },
        tabBarActiveTintColor: '#CBFF3D',
        tabBarInactiveTintColor: '#FFFFFF',
        tabBarShowLabel: false,
      })}
    >
      <Tab.Screen name="Home" component={HomeScreen} />
      <Tab.Screen name="Rewards" component={RewardsScreen} />
      <Tab.Screen name="Card" component={CardScreen} />
      <Tab.Screen name="More" component={MoreScreen} />
    </Tab.Navigator>
  );
};
export default Authenticated;

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