React Native 底部导航栏
2024-08-28 23:03:38
首先安装:npm install react-native-tab-navigator
然后再引入文件中
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
最新文章
- 快速开发框架CRL3.0发布,附带最新的项目示例CRLShoppingDemo
- 纪念逝去的岁月——C++实现一个栈
- windows 8 设置hyper-v网络设置
- VMware Workstation卸载清理批处理命令
- coursera-miniproject Pang任务总结
- getDimension,getDimensionPixelOffset和getDimensionPixelSize的一点说明
- Iterator和ListIterator区别
- C#学习笔记11:C#中的顺序结构、分支结构、循环结构
- C10K问题和Libevent库介绍
- 在python中编写socket服务端模块(二):使用poll或epoll
- 从.net复制源代码中国农历阵列,必要做日历
- boost.asio源码阅读(2) - task_io_service
- 命令行创建Maven项目卡住以及出错解决办法。
- map对象拷贝问题
- 采购申请 POCIRM-001:ORA-01403: 未找到任何数据
- ASP.NET Core Web API 与 SSL
- Oja’s rule
- [SDOI2011]计算器(exgcd&;BSGS)
- 基于nopcommerce b2c开源项目的精简版开发框架Nop.Framework
- 基于μC/OS—III的CC1120驱动程序设计