React Native自定义Bottom Tab Bar无法修改图标颜色求助

你遇到的核心问题是自定义TabBar组件时，调用tabBarIcon函数没有传入isFocused参数，导致原函数里拿不到这个状态值，自然无法根据焦点切换图标颜色。

问题原因 #

当你使用自定义tabBar组件时，React Navigation默认的tabBarIcon参数传递逻辑会被覆盖。在你的CustomTabBarV2中，调用options.tabBarIcon()时没有传入任何参数，所以原tabBarIcon函数里的{isFocused}解构出来就是undefined。

解决方案 #

在自定义TabBar的循环渲染中，调用tabBarIcon时传入当前项的isFocused状态，同时在tabBarIcon函数里利用这个参数切换图标颜色。

步骤1：修改CustomTabBarV2中调用tabBarIcon的代码

找到渲染每个tab项的部分，把{options.tabBarIcon()}改成{options.tabBarIcon({ isFocused })}，这样就把当前项的焦点状态传递给了图标函数：

// 原来的代码
{options.tabBarIcon()}

// 修改后
{options.tabBarIcon({ isFocused })}

步骤2：在Tab.Screen的tabBarIcon中使用isFocused切换颜色

现在isFocused参数能正常获取了，你可以根据这个状态设置图标颜色，甚至可以复用screenOptions里的tintColor：

<Tab.Screen name="Home" component={Screen1} 
  options={{
    title: 'Home',
    tabBarIcon: ({isFocused, color}) => { 
      // 这里color会自动取tabBarActiveTintColor或tabBarInactiveTintColor
      return <AntDesign name="home" size={24} color={color} />;
      // 或者手动指定颜色：color={isFocused ? 'black' : 'gray'}
    }
  }}
/>

修改后的完整代码 #

TabNavigator部分

<Tab.Navigator
  screenOptions={{
    tabBarActiveTintColor: "black",
    tabBarInactiveTintColor: 'gray',
  }}
  tabBar={props => <CustomTabBarV2 {...props}/>}
>
  <Tab.Screen name="Home" component={Screen1} 
    options={{
      title: 'Home',
      tabBarIcon: ({isFocused, color}) => { 
        console.log(isFocused); // 现在能正常输出true/false了
        return <AntDesign name="home" size={24} color={color} />;
      }
    }}
  />
  <Tab.Screen name="News"  component={Screen2} 
      options={{
        title: 'News',
        tabBarIcon: ({isFocused, color}) => <Ionicons name="newspaper-outline" size={24} color={color} />,
      }}
  />

  <Tab.Screen name="Profile" component={Screen5}   options={{
    title: 'Profile',
    tabBarIcon: ({isFocused, color}) => <MaterialIcons name="account-circle" size={24} color={color} />,
  }}/>

  <Tab.Screen name="Settings" component={Screen3}  
    options={{
      title: 'Settings',
      tabBarIcon: ({isFocused, color}) => <Ionicons name="settings-outline" size={24} color={color} />,
    }} />
  <Tab.Screen name="Control" component={Screen4}  
    options={{
      title: 'Control',
      tabBarIcon: ({isFocused, color}) => <Ionicons name="scan" size={24} color={color} />,
    }} />
   
</Tab.Navigator>

CustomTabBarV2部分（核心修改点）

// ...其他代码不变
return (
  <TouchableOpacity
    onLayout={event => {
        const layout = event.nativeEvent.layout;
        setPillWidth(layout.width  + 15)
        setPillHeight(layout.height)
    }}
    ref={(element) => navItemsRef.current.push(element)}
    key={index}
    accessibilityRole="button"
    accessibilityState={isFocused ? { selected: true } : {}}
    accessibilityLabel={options.tabBarAccessibilityLabel}
    testID={options.tabBarTestID}
    onPress={() => onPress(index)}
    style={{ 
      flex: 1,
      justifyContent: 'center', 
      flexDirection: 'row', 
      alignItems: 'center',
    }}>

    { isFocused ? 
      <View
        style={{ 
          justifyContent: 'center',
          flexDirection: 'row', 
          alignItems: 'center',
          paddingVertical: 10,
          paddingHorizontal: 20,
          borderRadius: 30,
        }}>
        {/* 传入isFocused参数 */}
        {options.tabBarIcon({ isFocused })}
        <Animated.View style={[{justifyContent: 'center', alignItems: 'center'}]}>
          <Text style={[{ color: isFocused ? options.tabBarActiveTintColor : options.tabBarInactiveTintColor, marginLeft: 2, width: '100%', textAlign: 'center' }]}>
            {label}
          </Text>
        </Animated.View>

    </View> : 
      <View
      style={{ 
        justifyContent: 'center',
        flexDirection: 'row', 
        alignItems: 'center', 
        paddingVertical: 10,
        paddingHorizontal: 20,
        borderRadius: 30,
      }}>
        {/* 同样传入isFocused参数 */}
        {options.tabBarIcon({ isFocused })}
      </View>
    }
  
  </TouchableOpacity>
);
// ...其他代码不变

额外说明 #

• 除了isFocused，你还可以传入color参数，它会自动对应screenOptions里的tabBarActiveTintColor和tabBarInactiveTintColor，这样不用手动写颜色判断，更灵活。
• 确保CustomTabBarV2中每个调用tabBarIcon的地方都传入了isFocused，包括焦点和非焦点状态下的渲染分支。

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