React Native(简单精致的底部导航栏):使用react-native-tab-navigator实现底部导航栏

版权声明：原创文章，转载请说明出处 https://blog.csdn.net/Destiny_strive/article/details/83993521

实现效果如下：

          点击选项卡可以切换并且改变上面页面的颜色、选中图标的颜色、图标

 

首先需要安装：

[code]npm install react-native-tab-navigator --save

然后在需要做导航栏的文件引入：

[code]import TabNavigator from 'react-native-tab-navigator'

现在可以开始开发导航栏了，这是我做的这个例子的完整代码：

[code]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

阅读更多