版权声明:原创文章,转载请说明出处 https://blog.csdn.net/Destiny_strive/article/details/83993521
实现效果如下:
点击选项卡可以切换并且改变上面页面的颜色、选中图标的颜色、图标
首先需要安装:
npm install react-native-tab-navigator --save
然后在需要做导航栏的文件引入:
import TabNavigator from 'react-native-tab-navigator'
现在可以开始开发导航栏了,这是我做的这个例子的完整代码:
import React, {Component} from 'react';
import {StyleSheet, View,Text,Image} from 'react-native';
import TabNavigator from 'react-native-tab-navigator'
export default class App extends Component<Props> {
/*初始化state*/
constructor(props){
super();
this.state={
selectedTab:'tb_msg',
}
}
/**
* 公共组件方法
* @param selectedTab 选中的tab
* @param title
* @param icon
* @param selectedIcon
* @param imageStyle 选中时渲染图标的颜色
* @param mark 角标
* @param viewContent 页面内容
* @returns {*}
*/
tabNavigatorItems(selectedTab,title,icon,selectedIcon,imageStyle,mark,viewContent){
return (
<TabNavigator.Item
selected={this.state.selectedTab === selectedTab }
title={title}
renderIcon={()=> <Image style={styles.myImage} source={icon}/> }
renderSelectedIcon={()=> <Image style={[styles.myImage,{tintColor:imageStyle}]} source={selectedIcon}/> }
badgeText={mark}
onPress={()=> this.setState({selectedTab:selectedTab}) }>
<View style={{flex:1}}><Text>{viewContent}</Text></View>
</TabNavigator.Item>
)
}
render() {
return (
<View style={styles.container}>
<TabNavigator>
{this.tabNavigatorItems('tb_msg',"消息",require('./images/msg.png'),require("./images/selected_msg.png"),'#ffe09a',"1","消息页面内容")}
{this.tabNavigatorItems('tb_contacts',"联系人",require('./images/contacts.png'),require("./images/selected_contacts.png"),'#65bb74',"","联系人页面内容")}
{this.tabNavigatorItems('tb_watch',"看点",require('./images/wacth.png'),require("./images/selected_watch.png"),'#6ebef3',"","看点页面内容")}
{this.tabNavigatorItems('tb_dynamic',"动态",require('./images/dynamic.png'),require("./images/selected_dynamic.png"),'#622193',"","动态页面内容")}
</TabNavigator>
</View>
);
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
backgroundColor: '#F5FCFF',
},
myImage:{
width:22,
height:22,
}
});
下面是组件的属性和描述
TabNavigator props:
prop | default | type | description |
---|---|---|---|
sceneStyle | inherited | object (style) | 场景样式,即Tab页容器的样式,可按View的style设置 |
tabBarStyle | inherited | object (style) | TabBar的样式,基本也可按照普通的style写法进行设置 |
tabBarShadowStyle | inherited | object (style) | TabBar阴影的样式,不过对于扁平化的设计,这个属性应该用处不大 |
hidesTabTouch | false | boolean | bool类型,即是否隐藏Tab按钮的按下效果 |
TabNavigator.Item props:
prop | default | type | description |
---|---|---|---|
renderIcon | none | function | 即图标,但为function类型,所以这里需要用到Arrow Function |
renderSelectedIcon | none | function | 选中状态的图标,非必填,也是function类型 |
badgeText | none | string or number | 即Tab右上角的提示文字,可为String或Number,类似QQ中Tab右上角的消息提示,非必填 |
renderBadge | none | function | 提示角标渲染方式,function类型,类似render的使用,非必填 |
title | none | string | 标题,String类型,非必填 |
titleStyle | inherited | style | 标题样式,style类型,非必填 |
selectedTitleStyle | none | style | 选中标题样式,style类型,非必填 |
tabStyle | inherited | style | styling for tab |
selected | none | boolean | bool型,是否选中状态,可使用setState进行控制,默认false |
onPress | none | function | 即点击事件的回调函数,这里需要控制的是state |
allowFontScaling | false | boolean | bool型,是否允许字体缩放,默认false |