如何在react-navigation中动态修改TabBar的activeTintColor属性？

阿华AIGC实验室

2026-5-26

嘿，我来帮你搞定这个问题！首先得明确一点：你在单个页面的static navigationOptions里设置tabBarOptions是不会生效的，因为tabBarOptions（在v6版本里是screenOptions的一部分）是整个Tab导航器的全局配置，不是单个页面能单独控制的。而且static的配置是固定的，没法动态响应状态变化，这就是你代码没效果的原因。

下面针对不同版本的React Navigation给出具体解决方案：

1. 在Tab导航器中绑定颜色状态

首先，我们需要在Tab导航器组件里用useState来维护激活颜色的状态，然后把这个状态值传给导航器的screenOptions：

import { useState } from 'react';
import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';
import { TouchableOpacity, Text, View } from 'react-native';

const Tab = createBottomTabNavigator();

function MyTabs() {
  // 初始化激活颜色为红色，后续可以通过setActiveTabColor修改
  const [activeTabColor, setActiveTabColor] = useState('red');

  return (
    <Tab.Navigator
      screenOptions={{
        tabBarActiveTintColor: activeTabColor,
        // 这里可以加其他TabBar的固定配置，比如tabBarInactiveTintColor之类的
      }}
    >
      {/* 你的Calendar页面路由 */}
      <Tab.Screen
        name="Calendar"
        component={CalendarScreen}
        options={({ navigation }) => ({
          tabBarLabel: _('calendar'),
          tabBarIcon: ({ focused }) => <Icon featherName="calendar" active={focused} />,
          // 替代你原来的actionButton，用headerRight设置顶部的创建按钮
          headerRight: () => (
            <TouchableOpacity 
              style={{ marginRight: 15, flexDirection: 'row', alignItems: 'center' }}
              onPress={() => navigation.navigate('EventCreate')}
            >
              <Icon featherName="plus" />
              <Text style={{ marginLeft: 5 }}>{_('create')}</Text>
            </TouchableOpacity>
          )
        })}
      />
      {/* 其他Tab页面... */}
    </Tab.Navigator>
  );
}

2. 在子页面中修改颜色

如果需要在CalendarScreen这类子页面里修改激活颜色，推荐用React Context来传递修改状态的方法，这样不会有多层props传递的麻烦：

第一步：创建Tab颜色Context

import { createContext, useContext } from 'react';

// 创建Context
const TabColorContext = createContext();

// 自定义Hook，方便子组件调用
export function useTabColor() {
  return useContext(TabColorContext);
}

第二步：在导航器中包裹Context.Provider

修改MyTabs组件，把状态和修改函数通过Context传递下去：

function MyTabs() {
  const [activeTabColor, setActiveTabColor] = useState('red');

  return (
    <TabColorContext.Provider value={{ activeTabColor, setActiveTabColor }}>
      <Tab.Navigator
        screenOptions={{
          tabBarActiveTintColor: activeTabColor,
        }}
      >
        {/* 你的Tab页面路由 */}
      </Tab.Navigator>
    </TabColorContext.Provider>
  );
}

第三步：在子页面中调用修改函数

在CalendarScreen里使用自定义Hook获取修改方法，就能随时修改TabBar的激活颜色了：

import { useTabColor } from './TabColorContext';
import { Button } from 'react-native';

function CalendarScreen({ navigation }) {
  const { setActiveTabColor } = useTabColor();

  // 示例：点击按钮修改激活颜色为蓝色
  const changeToBlue = () => {
    setActiveTabColor('blue');
  };

  return (
    <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
      <Button title="把Tab激活色改成蓝色" onPress={changeToBlue} />
      {/* 页面其他内容 */}
    </View>
  );
}

如果你还在使用v5或者更老的版本，思路是一样的，只是API略有不同：

1. 在导航器中维护状态并传递修改函数

import { useState } from 'react';
import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';

const Tab = createBottomTabNavigator();

function MyTabs() {
  const [activeTabColor, setActiveTabColor] = useState('red');

  return (
    <Tab.Navigator
      tabBarOptions={{
        activeTintColor: activeTabColor,
        // 其他固定配置
      }}
    >
      <Tab.Screen
        name="Calendar"
        component={CalendarScreen}
        options={({ navigation }) => ({
          tabBarLabel: _('calendar'),
          tabBarIcon: ({ focused }) => <Icon featherName="calendar" active={focused} />,
          headerRight: () => (
            <TouchableOpacity onPress={() => navigation.navigate('EventCreate')}>
              <Icon featherName="plus" />
              <Text>{_('create')}</Text>
            </TouchableOpacity>
          )
        })}
        // 把修改函数作为initialParams传递给子页面
        initialParams={{ setActiveTabColor }}
      />
    </Tab.Navigator>
  );
}

2. 在子页面中修改颜色

在CalendarScreen里通过navigation.getParam获取修改函数：

function CalendarScreen({ navigation }) {
  const changeToGreen = () => {
    navigation.getParam('setActiveTabColor')('green');
  };

  return (
    <View>
      <Button title="改成绿色" onPress={changeToGreen} />
    </View>
  );
}

总结一下，核心就是把TabBar的激活颜色和一个可修改的状态绑定，让导航器依赖这个状态，然后通过合适的方式在子页面中触发状态更新，这样就能实现动态修改了。

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