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 相关文章推荐
javascript 隔行换色函数代码
Oct 24 Javascript
用Javascript评估用户输入密码的强度实现代码
Nov 30 Javascript
左右悬浮可分组的网站QQ在线客服代码(可谓经典)
Dec 21 Javascript
javascript实现别踩白块儿小游戏程序
Nov 22 Javascript
JavaScript简单实现弹出拖拽窗口(一)
Jun 17 Javascript
轻松掌握JavaScript中介者模式
Aug 26 Javascript
JS设置CSS样式的方式汇总
Jan 21 Javascript
js获取当前周、上一周、下一周日期
Mar 19 Javascript
jQuery+datatables插件实现ajax加载数据与增删改查功能示例
Apr 17 jQuery
JS将网址url转化为JSON格式的方法
Jul 02 Javascript
在js文件中引入(调用)另一个js文件的三种方法
Sep 11 Javascript
在vs code 中如何创建一个自己的 Vue 模板代码
Nov 10 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
用header 发送cookie的php代码
2007/03/16 PHP
利用PHP如何统计Nginx日志的User Agent数据
2019/03/06 PHP
js 代码集(学习js的朋友可以看下)
2009/07/22 Javascript
THREE.JS入门教程(5)你应当知道的十件事
2013/01/24 Javascript
js获取光标位置和设置文本框光标位置示例代码
2014/01/09 Javascript
JavaScript参数个数可变的函数举例说明
2014/10/10 Javascript
js实现iGoogleDivDrag模块拖动层拖动特效的方法
2015/03/04 Javascript
input输入框鼠标焦点提示信息
2015/03/17 Javascript
JS中sort函数排序用法实例分析
2016/06/16 Javascript
BootStrap tab选项卡使用小结
2020/08/09 Javascript
jQuery内容筛选选择器实例代码
2017/02/06 Javascript
Angularjs中date过滤器失效的问题及解决方法
2018/07/06 Javascript
支付宝小程序自定义弹窗dialog插件的实现代码
2018/11/30 Javascript
Python装饰器decorator用法实例
2014/11/10 Python
使用Python写一个贪吃蛇游戏实例代码
2017/08/21 Python
利用Python查看目录中的文件示例详解
2017/08/28 Python
如何使用python操作vmware
2019/07/27 Python
python提取照片坐标信息的实例代码
2019/08/14 Python
python实现简单飞行棋
2020/02/06 Python
python 装饰器功能与用法案例详解
2020/03/06 Python
HTML5学习笔记之html5与传统html区别
2016/01/06 HTML / CSS
Marc Jacobs彩妆官网:Marc Jacobs Beauty
2017/07/03 全球购物
俄罗斯电子产品在线商店:UltraTrade
2020/01/30 全球购物
编程实现去掉XML的重复结点
2014/05/28 面试题
英文版餐饮业求职信
2013/10/18 职场文书
小学生感恩演讲稿
2014/04/25 职场文书
幼儿教师师德承诺书
2014/05/23 职场文书
学校运动会报道稿
2014/09/23 职场文书
体育个人工作总结
2015/02/09 职场文书
2015年上半年党建工作总结
2015/03/30 职场文书
辅导员学期工作总结
2015/08/14 职场文书
2015年美容师个人工作总结
2015/10/14 职场文书
关于应聘教师的自荐信
2016/01/28 职场文书
奖学金申请书(范文)
2019/08/14 职场文书
Python中的tkinter库简单案例详解
2022/01/22 Python
你知道Java Spring的两种事务吗
2022/03/16 Java/Android