如何修改Native Base Tabs中选中标签页的图标颜色为下划线颜色？

嘿，我来帮你搞定这个类似Twitter安卓的标签栏效果！要让选中标签页的图标颜色和tabBar下划线颜色一致，咱们只需要跟踪当前选中的标签索引，然后动态切换图标的颜色就可以了。下面是具体的修改方案：

核心思路 #

• 用状态保存当前选中的标签索引
• 监听标签切换事件，实时更新状态
• 根据当前选中索引，给对应标签的图标设置下划线的颜色（#29B6F6），未选中的保持原来的灰色（#B0BEC5）

修改后的完整代码 #

import React, { useState } from 'react';
import { StyleSheet } from 'react-native';
import { Tabs, Tab, TabHeading, Icon } from 'react-native-navigation'; // 请确保导入的是你使用的对应组件库
import Tab1 from './Tab1'; // 替换为你的Tab1组件实际路径

const TabBar = () => {
  // 初始化状态，默认选中第一个标签（索引为0）
  const [activeTabIndex, setActiveTabIndex] = useState(0);

  return (
    <Tabs
      tabBarUnderlineStyle={styles.tabBarUnderline}
      // 监听标签切换事件，更新选中的标签索引
      onChangeTab={({ i }) => setActiveTabIndex(i)}
    >
      <Tab
        heading={
          <TabHeading style={styles.tabHeading}>
            {/* 根据当前选中索引动态设置图标颜色 */}
            <Icon 
              name="home" 
              size={30} 
              color={activeTabIndex === 0 ? '#29B6F6' : '#B0BEC5'} 
            />
          </TabHeading>
        }
      >
        <Tab1 />
      </Tab>
      <Tab
        heading={
          <TabHeading style={styles.tabHeading}>
            <Icon 
              name="search" 
              size={30} 
              color={activeTabIndex === 1 ? '#29B6F6' : '#B0BEC5'} 
            />
          </TabHeading>
        }
      >
        <Tab1 />
      </Tab>
      <Tab
        heading={
          <TabHeading style={styles.tabHeading}>
            <Icon 
              name="notifications" 
              size={30} 
              color={activeTabIndex === 2 ? '#29B6F6' : '#B0BEC5'} 
            />
          </TabHeading>
        }
      >
        <Tab1 />
      </Tab>
      <Tab
        heading={
          <TabHeading style={styles.tabHeading}>
            <Icon 
              name="email" 
              size={30} 
              color={activeTabIndex === 3 ? '#29B6F6' : '#B0BEC5'} 
            />
          </TabHeading>
        }
      >
        <Tab1 />
      </Tab>
    </Tabs>
  );
};

const styles = StyleSheet.create({
  tabHeading: {
    backgroundColor: 'white',
  },
  tabBarUnderline: {
    backgroundColor: '#29B6F6',
    height: 3
  }
});

export default TabBar;

关键改动说明 #

1. 添加状态管理：用useState钩子创建activeTabIndex状态，用来记录当前选中的标签位置
2. 监听标签切换：给<Tabs>组件添加onChangeTab回调，每次切换标签时自动更新activeTabIndex的值
3. 动态设置图标颜色：每个<Icon>的color属性通过三元表达式判断，如果当前标签索引和activeTabIndex匹配，就使用下划线的蓝色，否则保持灰色

这样修改后，当你切换标签时，选中标签的图标就会自动变成和下划线一致的蓝色，完美还原Twitter安卓的标签栏交互效果啦！

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