如何更改本机基本选项卡中选定的选项卡图标颜色? [英] How to change selected tab icon color in native base Tabs?
问题描述
这是 react-native 的一个片段.我需要将选定的选项卡图标颜色更改为 tabBar 下划线颜色.怎么做?我正在尝试编写一个类似于 twitter android 应用程序的标签栏.
const TabBar = () =>{返回 (<Tabs tabBarUnderlineStyle={styles.tabBarUnderline}><标签Heading={<Icon name="home" size={30} color="#B0BEC5"/></TabHeading>}><Tab1/></Tab><标签Heading={<TabHeading style={styles.tabHeading} ><Icon name="search" size={30} color="#B0BEC5"/></TabHeading>}><Tab1/></Tab><标签Heading={<TabHeading style={styles.tabHeading}><Icon name="notifications" size={30} color="#B0BEC5"/></TabHeading>}><Tab1/></Tab><标签Heading={<TabHeading style={styles.tabHeading}><Icon name="email" size={30} color="#B0BEC5"/></TabHeading>}><Tab1/></Tab></Tabs>);};const 样式 = StyleSheet.create({标签标题:{背景颜色:'白色',},tabBar下划线:{背景颜色:'#29B6F6',高度:3}});导出默认 TabBar;
你只需要这样做
class TabIcon extends Component {使成为() {var color = this.props.focused ?'#5C6BC0':'#E4E3E3';返回 (<视图样式={{flex:1, flexDirection:'column', alignItems:'center', alignSelf:'center', justifyContent: 'center'}}><查看><图标名称={this.props.title} size={30} color={color}/>}</查看></查看>);}}类 App 扩展组件 {使成为 () {返回 (<路由器><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"><场景键='tab1'标题='搜索1'组件={home}图标={TabIcon}navBar={elementsHeader}/><场景键='tab2'组件={home}图标={TabIcon}标题='电源睡眠'navBar={elementsHeader}/><场景键='tab3'标题='书'组件={home}图标={TabIcon}navBar={elementsHeader}/><场景键='tab4'标题='设置'组件={home}图标={TabIcon}navBar={elementsHeader}/></场景></场景></路由器>)}}
reference => https://gist.github.com/rturk/858c1afaee170a3a1652>83dae/p> 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.
You only need to do something like that reference => https://gist.github.com/rturk/858c1afaee170a3a141adc7da652883e 这篇关于如何更改本机基本选项卡中选定的选项卡图标颜色?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!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;
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>
)
}
}