React Native底部栏自定义：修改背景色及添加激活项底部高亮线条

看起来你需要调整底部导航栏的背景色，并且给激活的标签添加底部高亮线，我来帮你搞定这个问题！

首先你之前尝试的tabBarColor和backgroundColor没生效，是因为没有放在正确的配置位置里。结合你的代码，我给你整理了完整的修改方案：

修改后的完整代码 #

export const InternalStacks = TabNavigator({
  Home: { screen: HomeStack },
  Graph: { screen: GraphStack }
}, {
  navigationOptions: ({ navigation }) => ({
    tabBarIcon: ({ focused, tintColor }) => {
      let iconName, iconNameFocused;
      const { routeName } = navigation.state;
      switch(routeName){
        case 'Home':
          iconName = require('../assets/icons/home.png');
          iconNameFocused = require('../assets/icons/home.png');
          break;
        case 'Graph':
          iconName = require('../assets/icons/chart.png');
          iconNameFocused = require('../assets/icons/chart.png');
          break;
      }
      // 根据激活状态设置图标容器样式，实现底部高亮线
      const iconContainerStyle = focused 
        ? { borderBottomColor: '#E64A19', borderBottomWidth: 2, paddingBottom: 5 }
        : { paddingBottom: 5 };
      
      return (
        <View style={iconContainerStyle}>
          <Image 
            style={{width: 20, height: 20, tintColor }} 
            source={focused ? iconNameFocused : iconName} 
          />
        </View>
      );
    }
  }),
  tabBarComponent: TabBarBottom,
  tabBarPosition: 'bottom',
  tabBarOptions: {
    activeTintColor: '#FBC530',
    inactiveTintColor: 'black',
    // 配置底部导航栏背景色的正确位置
    style: {
      backgroundColor: 'white',
      borderTopWidth: 0, // 移除默认顶部边框，让样式更简洁
      elevation: 4, // 可选：添加阴影效果，贴近目标设计的层次感
    },
  },
  animationEnabled: false,
  swipeEnabled: false,
});

关键修改说明 #

1. 底部导航背景色设置
   把背景色配置放在tabBarOptions.style对象里，这是React Native老版本TabNavigator的正确配置位置，之前的写法因为层级不对所以没生效。

2. 激活标签底部高亮线
   给图标外层包裹了一个View，通过focused状态判断，给激活的标签容器添加橙色的底部边框，这样就能实现你想要的高亮线条效果。同时统一添加了paddingBottom，保证激活和未激活状态下图标位置一致。

3. 额外优化
   添加borderTopWidth:0移除了导航栏默认的顶部边框，还可以通过elevation（Android）或shadow系列样式（iOS）添加阴影，让导航栏更贴近目标设计的视觉效果。

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