React Native标签页激活背景色设置：能否为不同标签页配置不同颜色？

嘿，针对你用react-navigation的TabNavigator遇到的标签页背景色问题，我给你整理了两种解决方案，分别对应统一设置和不同标签页自定义的需求：

一、给所有标签页设置统一的激活背景色 #

这个很简单，直接在TabNavigator的配置参数里，通过tabBarOptions就能搞定。我把你的代码修改了一下，加上了相关配置：

import { TabNavigator, TabBarTop } from 'react-navigation';
import React from 'react';
import Icon from 'react-native-vector-icons/dist/FontAwesome';
import Home from '../home/Home.js';
import About from '../home/About.js';

const Routes = TabNavigator(
  {
    Home: {
      screen: Home,
      navigationOptions: {
        tabBarIcon: ({ focused, tintColor }) => (
          <Icon name='music' size={20} color={'white'} />
        ),
      },
    },
    About: {
      screen: About,
      navigationOptions: {
        tabBarIcon: ({ focused, tintColor }) => (
          <Icon name='info' size={20} color={'white'} />
        ),
      },
    },
  },
  {
    tabBarComponent: TabBarTop,
    tabBarOptions: {
      // 这里设置所有激活标签页的统一背景色
      activeBackgroundColor: '#2196F3',
      // 未激活状态的背景色也可以一起设置
      inactiveBackgroundColor: '#1976D2',
      // 配合调整文字/图标的颜色，让样式更协调
      activeTintColor: 'white',
      inactiveTintColor: '#E3F2FD',
    },
  }
);

export default Routes;

二、给不同标签页设置不同的激活背景色 #

默认的TabBarTop组件不支持单独给每个标签页配置激活背景色，这时候我们需要自己写一个自定义TabBar组件，通过判断当前激活的路由来动态切换背景色。

下面是完整的实现代码，我已经适配了你的路由结构：

import { TabNavigator, TabBarTop } from 'react-navigation';
import React from 'react';
import { View, TouchableOpacity, Text } from 'react-native';
import Icon from 'react-native-vector-icons/dist/FontAwesome';
import Home from '../home/Home.js';
import About from '../home/About.js';

// 自定义TabBar组件，核心是根据当前激活路由动态设置背景色
const CustomTabBar = ({ navigation, activeTintColor, inactiveTintColor }) => {
  const routes = navigation.state.routes;
  const activeIndex = navigation.state.index;

  return (
    <View style={{ flexDirection: 'row', backgroundColor: '#1976D2' }}>
      {routes.map((route, index) => {
        const isActive = index === activeIndex;
        // 这里根据路由名称，给不同标签页设置专属激活背景色
        const bgColor = isActive 
          ? route.routeName === 'Home' ? '#FF5722' : '#9C27B0' 
          : '#1976D2';

        return (
          <TouchableOpacity
            key={route.routeName}
            style={{
              flex: 1,
              justifyContent: 'center',
              alignItems: 'center',
              paddingVertical: 16,
              backgroundColor: bgColor,
            }}
            onPress={() => navigation.navigate(route.routeName)}
          >
            {/* 渲染对应路由的图标 */}
            {route.routeName === 'Home' && (
              <Icon name='music' size={20} color={isActive ? 'white' : inactiveTintColor} />
            )}
            {route.routeName === 'About' && (
              <Icon name='info' size={20} color={isActive ? 'white' : inactiveTintColor} />
            )}
            {/* 如果需要显示标签文字，取消下面的注释即可 */}
            {/* <Text style={{ color: isActive ? 'white' : inactiveTintColor, marginTop: 4 }}>
              {route.routeName}
            </Text> */}
          </TouchableOpacity>
        );
      })}
    </View>
  );
};

const Routes = TabNavigator(
  {
    Home: { screen: Home },
    About: { screen: About },
  },
  {
    // 替换成我们自定义的TabBar组件
    tabBarComponent: CustomTabBar,
    tabBarOptions: {
      activeTintColor: 'white',
      inactiveTintColor: '#E3F2FD',
    },
  }
);

export default Routes;

小提示： #

• 你可以根据自己的需求修改bgColor里的颜色值，或者扩展更多路由的自定义背景色。
• 如果你的react-navigation是v3及以上版本，API会有一些小变化，但核心思路都是通过自定义TabBar来实现个性化样式。

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