react-native-router-flux中Tab图标点击切换场景后颜色未变更的解决求助

嘿，我帮你搞定这个Tab图标颜色不切换的问题！你现在的情况是场景能切换，但图标颜色没跟着变，核心原因是没有根据Tab的选中状态来动态设置图标样式。下面给你两种可行的解决方案，你可以根据自己的代码情况选择：

方案一：利用tabBarIcon的focused参数直接控制 #

react-native-router-flux的Scene组件的tabBarIcon属性可以接收一个函数，这个函数会传入focused（当前Tab是否被选中）参数，我们可以用这个参数来切换图标的颜色或者资源。

示例代码（用矢量图标，比如react-native-vector-icons） #

import React, { Component } from 'react';
import { Router, Scene, Tabs } from 'react-native-router-flux';
import { Text, View } from 'react-native';
import Icon from 'react-native-vector-icons/Ionicons'; // 假设你用的是Ionicons
import LoginScreen from './screens/LoginScreen';
import Home from './screens/second/Home';
import Market from './screens/second/Market';

class App extends Component {
  render() {
    return (
      <Router>
        <Scene key="root">
          <Scene key="login" component={LoginScreen} initial={true} hideNavBar />
          <Tabs 
            key="mainTabs" 
            tabBarPosition="bottom"
            style={{ backgroundColor: '#fff' }}
          >
            {/* 首页Tab */}
            <Scene
              key="home"
              component={Home}
              title="首页"
              tabBarIcon={({ focused }) => (
                <Icon 
                  name="home" 
                  color={focused ? '#1677ff' : '#999'} // 选中用蓝色，未选中用灰色
                  size={24} 
                />
              )}
            />
            {/* 市场Tab */}
            <Scene
              key="market"
              component={Market}
              title="市场"
              tabBarIcon={({ focused }) => (
                <Icon 
                  name="basket" 
                  color={focused ? '#1677ff' : '#999'}
                  size={24} 
                />
              )}
            />
            {/* 其他Tab同理 */}
          </Tabs>
        </Scene>
      </Router>
    );
  }
}

export default App;

如果是自定义图片图标 #

如果你的图标是本地图片，可以根据选中状态切换不同的图片，或者用tintColor给单色图片染色：

// 切换不同图片
tabBarIcon={({ focused }) => (
  <Image
    source={focused ? require('./assets/icons/home-active.png') : require('./assets/icons/home-inactive.png')}
    style={{ width: 24, height: 24 }}
  />
)}

// 用tintColor染色（仅适用于单色PNG图片）
tabBarIcon={({ focused }) => (
  <Image
    source={require('./assets/icons/home.png')}
    style={{ width: 24, height: 24, tintColor: focused ? '#1677ff' : '#999' }}
  />
)}

方案二：自定义TabBar组件（更灵活的控制） #

如果默认的TabBar样式满足不了你的需求，你可以完全自定义一个TabBar组件，自己控制每个Tab的选中状态和样式：

第一步：创建自定义TabBar组件 #

import React from 'react';
import { View, TouchableOpacity, Text, Image } from 'react-native';
import Icon from 'react-native-vector-icons/Ionicons';

const CustomTabBar = ({ state, navigation }) => {
  // 获取当前选中的Tab索引
  const activeIndex = state.index;
  // 获取所有Tab路由
  const tabs = state.routes;

  return (
    <View style={{
      flexDirection: 'row',
      height: 60,
      backgroundColor: '#fff',
      borderTopWidth: 1,
      borderTopColor: '#eee'
    }}>
      {tabs.map((tab, index) => {
        const isActive = activeIndex === index;
        const { iconName, tabTitle } = tab.params;

        // 点击切换Tab的逻辑
        const handleTabPress = () => {
          if (!isActive) {
            navigation.navigate(tab.name);
          }
        };

        return (
          <TouchableOpacity
            key={tab.key}
            onPress={handleTabPress}
            style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}
          >
            {/* 图标 */}
            <Icon
              name={iconName}
              size={24}
              color={isActive ? '#1677ff' : '#999'}
            />
            {/* Tab标题 */}
            <Text style={{
              fontSize: 12,
              color: isActive ? '#1677ff' : '#999',
              marginTop: 4
            }}>
              {tabTitle}
            </Text>
          </TouchableOpacity>
        );
      })}
    </View>
  );
};

export default CustomTabBar;

第二步：在Tabs组件中使用自定义TabBar #

<Tabs 
  key="mainTabs" 
  tabBar={props => <CustomTabBar {...props} />} // 传入自定义TabBar
>
  <Scene
    key="home"
    component={Home}
    params={{ iconName: 'home', tabTitle: '首页' }} // 传递图标和标题参数
  />
  <Scene
    key="market"
    component={Market}
    params={{ iconName: 'basket', tabTitle: '市场' }}
  />
  {/* 其他Tab */}
</Tabs>

注意事项 #

• 如果你用的是react-native-router-flux的较新版本，确保API参数正确（比如有些版本tabBarIcon的参数可能略有不同，但核心都是接收focused状态）。
• 如果使用矢量图标，记得先安装对应的图标库（比如react-native-vector-icons）并配置好链接。

这样修改后，点击Tab的时候，图标颜色就会根据选中状态自动切换啦！

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