This is a snippet of react-native. I need to change the selected tabs icon color to tabBar underline color. How to do it? I am trying code a tab bar like on the twitter android app.
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;
You can get various color icon from this website. https://iconmonstr.com/
I have no idea how to change color of your icon. Because your icon came from React Native Vector Icons.
in React Native Vector Icons wiki. below is read. https://github.com/oblador/react-native-vector-iconsIcon Component You can either use one of the bundled icons above or roll your own custom font.
import Icon from 'react-native-vector-icons/FontAwesome';
const myIcon = (<Icon name="rocket" size={30} color="#900" />)
it may work well.
You only need to do something like that
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>
)
}
}
reference => https://gist.github.com/rturk/858c1afaee170a3a141adc7da652883e
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.