如何根据活跃路由更改React Native底部标签导航栏颜色？

问题分析 #

你需要根据当前活跃的路由动态修改createMaterialBottomTabNavigator的底部导航栏背景色，之前尝试设置状态但不知道如何获取焦点路由，且单个页面设置tabBarStyle的方式无法实现全局切换效果。

解决方案 #

可以通过@react-navigation/native提供的useNavigationState钩子获取当前活跃路由名称，然后在导航器的screenOptions中动态设置背景色。

修正后的完整代码 #

import { NavigationContainer, useNavigationState } from '@react-navigation/native';
import { createMaterialBottomTabNavigator } from '@react-navigation/material-bottom-tabs';
import MaterialCommunityIcons from 'react-native-vector-icons/MaterialCommunityIcons';
import WelcomePage from './WelcomePage'; // 确保组件路径正确
import AuthScreen from './AuthScreen'; // 确保组件路径正确

const Tab = createMaterialBottomTabNavigator();

const MyTabs = () => {
  // 获取当前活跃路由的名称
  const activeRouteName = useNavigationState(state => state.routes[state.index].name);

  return (
    <Tab.Navigator
      initialRouteName="Home"
      activeColor="#f0edf6"
      inactiveColor="#3e2465"
      // 根据活跃路由动态切换导航栏背景色
      screenOptions={{
        tabBarStyle: {
          backgroundColor: activeRouteName === 'Home' ? '#fc03cf' : '#2ecc71',
        },
      }}
    >
      <Tab.Screen
        name="Home"
        component={WelcomePage}
        options={{
          tabBarLabel: "Home",
          tabBarIcon: ({ color }) => (
            <MaterialCommunityIcons name="home" color={color} size={26} />
          ),
        }}
      />
      <Tab.Screen
        name="Account"
        component={AuthScreen}
        options={{
          tabBarLabel: "Account",
          tabBarIcon: ({ color }) => (
            <MaterialCommunityIcons name="account" color={color} size={26} />
          ),
        }}
      />
    </Tab.Navigator>
  );
};

export default function App() {
  return (
    <NavigationContainer>
      <MyTabs />
    </NavigationContainer>
  );
}

关键说明 #

1. 获取活跃路由：useNavigationState钩子接收回调函数，通过state.index拿到当前活跃路由的索引，再从state.routes中取出对应路由的名称。
2. 动态设置样式：在Tab.Navigator的screenOptions中，根据activeRouteName的值切换tabBarStyle的backgroundColor，实现导航栏背景色随活跃路由变化。
3. 修正语法错误：原代码中MyTabs组件的闭合括号位置错误，导致App函数被嵌套在组件内部，已修正为正确结构。

另一种实现方式（无需钩子） #

也可以在screenOptions的函数参数中，通过navigation对象直接获取当前路由：

<Tab.Navigator
  initialRouteName="Home"
  activeColor="#f0edf6"
  inactiveColor="#3e2465"
  screenOptions={({ navigation }) => {
    const routeName = navigation.getCurrentRoute()?.name;
    return {
      tabBarStyle: {
        backgroundColor: routeName === 'Home' ? '#fc03cf' : '#2ecc71',
      },
    };
  }}
>
  {/* 屏幕配置 */}
</Tab.Navigator>

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