如何更改本机基本选项卡中选定的选项卡图标颜色？答案

【问题标题】：How to change selected tab icon color in native base Tabs?如何更改本机基本选项卡中选定的选项卡图标颜色？
【发布时间】：2018-01-02 11:35:07
【问题描述】：

这是 react-native 的 sn-p。我需要将选定的选项卡图标颜色更改为 tabBar 下划线颜色。怎么做？我正在尝试编写一个类似于 twitter android 应用程序的标签栏。

const TabBar = () => {
    return (
        <Tabs tabBarUnderlineStyle={styles.tabBarUnderline}>
            <Tab 
            heading={<TabHeading style={styles.tabHeading}>
            <Icon name="home" size={30} color="#B0BEC5" />
            </TabHeading>}
            >
                <Tab1 />
            </Tab>
            <Tab 
            heading={<TabHeading style={styles.tabHeading} ><Icon name="search" size={30} color="#B0BEC5" /></TabHeading>}
            
            >
                <Tab1 />
            </Tab>
            <Tab 
            heading={<TabHeading style={styles.tabHeading}><Icon name="notifications" size={30} color="#B0BEC5" /></TabHeading>}
            >
                <Tab1 />
            </Tab>
            <Tab 
            heading={<TabHeading style={styles.tabHeading}><Icon name="email" size={30} color="#B0BEC5" /></TabHeading>}
            >
                <Tab1 />
            </Tab>
        </Tabs>
    );
};

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

export default TabBar;

【问题讨论】：

没有尝试自定义主题？
是否有任何属性可以通过选项卡选择设置图标颜色？
建议你通过theme/variables你会找到解决办法
是否有相同或任何替代的更新？

标签： javascript react-native native-base

【解决方案1】：

您可以从这个网站获得各种颜色的图标。 https://iconmonstr.com/

我不知道如何更改图标的颜色。因为你的图标来自 React Native Vector Icons。

在 React Native Vector Icons wiki 中。下面是阅读。 https://github.com/oblador/react-native-vector-iconsIcon 组件您可以使用上面捆绑的图标之一，也可以滚动您自己的自定义字体。

import Icon from 'react-native-vector-icons/FontAwesome';
const myIcon = (<Icon name="rocket" size={30} color="#900" />)

它可能运作良好。

【讨论】：

如何通过tab选择改变图标的颜色属性？
我不知道。

【解决方案2】：

你只需要这样做

 class TabIcon extends Component {

  render() {

    var color = this.props.focused ? '#5C6BC0' : '#E4E3E3';

    return (
      <View style={{flex:1, flexDirection:'column', alignItems:'center', alignSelf:'center', justifyContent: 'center'}}>
       <View>
         <Icon name={this.props.title} size={30} color={color}  />}
        </View>
      </View>
    );
  }
}


class App extends Component {
    render () {
      return (
        <Router>
        <Scene hideNavBar key="tabbar" type="reset" duration={1} initial={true}>
          <Scene key='main' showLabel={false} tabs={true} activeTintColor="#FF5722" titleStyle={styles.title} tabBarStyle={styles.tabBar} default="tab1">
            <Scene 
              key='tab1'
              title='search1'
              component={home}
              icon={TabIcon} 
              navBar={elementsHeader}
              />
            <Scene 
              key='tab2'
              component={home}
              icon={TabIcon} 
              title='power-sleep'
              navBar={elementsHeader}
              />
            <Scene 
              key='tab3'
              title='book'
              component={home}
              icon={TabIcon} 
              navBar={elementsHeader}
              />
            <Scene 
              key='tab4'
              title='setting'
              component={home}
              icon={TabIcon} 
              navBar={elementsHeader}
              />
          </Scene>
        </Scene>
        </Router>
        )
    }
}

参考 => https://gist.github.com/rturk/858c1afaee170a3a141adc7da652883e

【讨论】：