react-native-tab-navigator组件的基本使用示例代码


Posted in Javascript onSeptember 07, 2017

要做的效果很简单,如下图所示:

react-native-tab-navigator组件的基本使用示例代码

使用基本教程

1.引入组件

import TabNavigator from 'react-native-tab-navigator';

Github上的地址

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

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
移动节点的jquery代码
Jan 13 Javascript
jQuery中:first-child选择器用法实例
Dec 31 Javascript
JavaScript限定图片显示大小的方法
Mar 11 Javascript
JavaScript中扩展Array contains方法实例
Aug 23 Javascript
JS+CSS实现大气的黑色首页导航菜单效果代码
Sep 10 Javascript
浅谈window.onbeforeunload() 事件调用ajax
Jun 29 Javascript
JQuery控制DIV的选取实现方法
Sep 18 Javascript
vue+echarts实现动态绘制图表及异步加载数据的方法
Oct 17 Javascript
vue+element创建动态的form表单及动态生成表格的行和列
May 20 Javascript
vue.js的状态管理vuex中store的使用详解
Nov 08 Javascript
JavaScript代理模式原理与用法实例详解
Mar 10 Javascript
详解微信小程序工程化探索之webpack实战
Apr 20 Javascript
基于Bootstrap table组件实现多层表头的实例代码
Sep 07 #Javascript
详解React native全局变量的使用(跨组件的通信)
Sep 07 #Javascript
BootStrap给table表格的每一行添加一个按钮事件
Sep 07 #Javascript
JS实现闭包中的沙箱模式示例
Sep 07 #Javascript
react-native使用react-navigation进行页面跳转导航的示例
Sep 07 #Javascript
详解vue-cli构建项目反向代理配置
Sep 07 #Javascript
vue数字类型过滤器的示例代码
Sep 07 #Javascript
You might like
smarty中先strip_tags过滤html标签后truncate截取文章运用
2010/10/25 PHP
Fine Uploader文件上传组件应用介绍
2013/01/06 PHP
PHP使用正则表达式清除超链接文本
2013/11/12 PHP
浅谈php和js中json的编码和解码
2016/10/24 PHP
php中strlen和mb_strlen用法实例分析
2016/11/12 PHP
PHP实现更改hosts文件的方法示例
2017/08/08 PHP
php中array_fill函数的实例用法
2021/03/02 PHP
PHP7 错误处理机制修改
2021/03/09 PHP
js中eval详解
2012/03/30 Javascript
基于jquery ajax 用户无刷新登录方法详解
2012/04/28 Javascript
jQuery验证元素是否为空的两种常用方法
2015/03/17 Javascript
JS监听微信、支付宝等移动app及浏览器的返回、后退、上一页按钮的事件方法
2016/08/05 Javascript
js+css3制作时钟特效
2016/10/16 Javascript
JS函数多个参数默认值指定方法分析
2016/11/28 Javascript
jQuery UI Draggable + Sortable 结合使用(实例讲解)
2017/09/07 jQuery
JavaScript伪数组用法实例分析
2017/12/22 Javascript
JS同步、异步、延迟加载的方法
2018/05/05 Javascript
vue-router传参用法详解
2019/01/19 Javascript
浅谈Vue2.4.0 $attrs与inheritAttrs的具体使用
2020/03/08 Javascript
微信小程序实现带放大效果的轮播图
2020/05/26 Javascript
[46:16]2018DOTA2亚洲邀请赛3月30日 小组赛B组 iG VS VP
2018/03/31 DOTA
[00:12]DAC2018 Miracle-站上中单舞台,他能否再写奇迹?
2018/04/06 DOTA
tensorflow实现在函数中用tf.Print输出中间值
2020/01/21 Python
X/HTML5 和 XHTML2
2008/10/17 HTML / CSS
HTML5 Canvas 起步(2) - 路径
2009/05/12 HTML / CSS
英国最大的高品质珠宝和手表专家:Goldsmiths
2017/03/11 全球购物
Dune London官网:英国著名奢华鞋履品牌
2017/11/30 全球购物
捷克体育用品购物网站:D-sport
2017/12/28 全球购物
365 Tickets英国:全球景点门票
2019/07/06 全球购物
大学生专业个人学习的自我评价
2013/10/26 职场文书
涉外经济法专业毕业生推荐信
2013/11/24 职场文书
学生实习推荐信范文
2013/11/26 职场文书
乡镇干部个人对照检查材料(群众路线)
2014/09/26 职场文书
协议书范文
2015/01/27 职场文书
入党积极分子党支部意见
2015/06/02 职场文书
Spring JPA 增加字段执行异常问题及解决
2022/06/10 Java/Android