react-native-tab-navigator组件的基本使用示例代码
时间:2019-04-01
本文章向大家介绍react-native-tab-navigator组件的基本使用示例代码,主要包括react-native-tab-navigator组件的基本使用示例代码使用实例、应用技巧、基本知识点总结和需要注意事项,具有一定的参考价值,需要的朋友可以参考一下。
要做的效果很简单,如下图所示:
使用基本教程
1.引入组件
import TabNavigator from 'react-native-tab-navigator';
2.render方法中返回:
render() { return ( <View style={styles.container} > <TabNavigator> <TabNavigator.Item selected={this.state.selectedTab === '电影'} title="电影" titleStyle={styles.tabText} selectedTitleStyle={styles.selectedTabText} renderIcon={() => <Image style={styles.icon} source={require("../images/movie_gray.png")} />} renderSelectedIcon={() => <Image style={styles.icon} source={require("../images/movie_red.png")} />} onPress={() => this.setState({ selectedTab: '电影' })}> <MoviePage/> // 这里放入页面组件 </TabNavigator.Item> <TabNavigator.Item selected={this.state.selectedTab === '音乐'} title="音乐" titleStyle={styles.tabText} selectedTitleStyle={styles.selectedTabText} renderIcon={() => <Image style={styles.icon} source={require("../images/music_gray.png")} />} renderSelectedIcon={() => <Image style={styles.icon} source={require("../images/music_red.png")} />} onPress={() => this.setState({ selectedTab: '音乐' })}> <MusicPage /> </TabNavigator.Item> <TabNavigator.Item selected={this.state.selectedTab === '图书'} title="图书" titleStyle={styles.tabText} selectedTitleStyle={styles.selectedTabText} renderIcon={() => <Image style={styles.icon} source={require("../images/book_gray.png")} />} renderSelectedIcon={() => <Image style={styles.icon} source={require("../images/book_red.png")} />} onPress={() => this.setState({ selectedTab: '图书' })}> <BookPage /> </TabNavigator.Item> <TabNavigator.Item selected={this.state.selectedTab === '我的'} title="我的" titleStyle={styles.tabText} selectedTitleStyle={styles.selectedTabText} renderIcon={() => <Image style={styles.icon} source={require("../images/my_gray.png")} />} renderSelectedIcon={() => <Image style={styles.icon} source={require("../images/my_red.png")} />} onPress={() => this.setState({ selectedTab: '我的' })}> <MyPage /> </TabNavigator.Item> </TabNavigator> </View> ); }
引入页面组件:
import MoviePage from './pages/MoviePage'; import MusicPage from './pages/MusicPage'; import BookPage from './pages/BookPage'; import MyPage from './pages/MyPage';
设置state状态机:
constructor(props){ super(props); this.state = { selectedTab:'电影' } }
引入基本样式:
const styles = StyleSheet.create({ container:{ flex:1, backgroundColor:'#fff' }, tabText:{ color:'#000000', fontSize:10 }, selectedTabText:{ color:'#D81E06' }, icon:{ width:20, height:20 } })
这个时候效果已经出来了,我们继续抽象组件:
将每一个栏目抽出来放到一个统一的方法中:
_renderTabarItems(selectedTab,icon,selectedIcon,Component){ return ( <TabNavigator.Item selected={this.state.selectedTab === selectedTab} title={selectedTab} titleStyle={styles.tabText} selectedTitleStyle={styles.selectedTabText} renderIcon={() => <Image style={styles.icon} source={icon} />} renderSelectedIcon={() => <Image style={styles.icon} source={selectedIcon} />} onPress={() => this.setState({ selectedTab: selectedTab })} > <Component /> </TabNavigator.Item> ) }
此时,render方法中就直接引用四个方法即可:
render() { return ( <View style={styles.container}> <TabNavigator> {this._renderTabarItems('电影',require('../img/movie_gray.png'),require('../img/movie_red.png'),MoviePage)} {this._renderTabarItems('音乐',require('../img/music_gray.png'),require('../img/music_red.png'),MusicPage)} {this._renderTabarItems('图书',require('../img/book_gray.png'),require('../img/book_red.png'),BookPage)} {this._renderTabarItems('我的',require('../img/my_gray.png'),require('../img/my_red.png'),MyPage)} </TabNavigator> </View> ); }
至此,已经初步完成。
组件的属性集合:
Props
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 |
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持脚本之家。
- Java基础-07(02).总结private,this,封装,static,成员方法变量,局部变量匿名对象
- 通过shell脚本快速定位active session问题(r4笔记第65天)
- 01 整合IDEA+Maven+SSM框架的高并发的商品秒杀项目之业务分析与DAO层
- JSP第六篇【自定义标签之传统标签】
- 过滤器监听器面试题都在这里
- 02 整合IDEA+Maven+SSM框架的高并发的商品秒杀项目之Service层
- JSP第五篇【JSTL的介绍、core标签库、fn方法库、fmt标签库】
- java中的序列化 (r4笔记第64天)
- JSP第四篇【EL表达式介绍、获取各类数据、11个内置对象、执行运算、回显数据、自定义函数、fn方法库】
- 03 整合IDEA+Maven+SSM框架的高并发的商品秒杀项目之web层
- JSP第三篇【JavaBean的介绍、JSP的行为--JavaBean】
- Java基础-06.总结二维数组,面向对象
- 04 整合IDEA+Maven+SSM框架的高并发的商品秒杀项目之高并发优化
- 过滤器第一篇【介绍、入门、简单应用】
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法
- 46. Vue路由传参的基本使用
- H3C在端口同时配置MAC地址认证和802.1x
- proxmox notes
- Unix每分钟监控进程的状态
- webpack实战——资源输入与输出
- R语言读取 xlsx 和xls 文件
- pytest文档42-fixture参数化params
- 搭建node服务(三):使用TypeScript
- Antd for Vue使用Form组件报错You cannot set a form field before rendering
- IDEA配置Resin
- BERT详解(附带ELMo、GPT介绍)
- Centos7创建LVM及扩容
- python3 使用session模拟post实现修改活码内容
- linux LVM逻辑卷的创建,扩容,缩减和删除
- shell脚本中各种括号的区别以及用法