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 相关文章推荐
在textarea中屏蔽js的某个function的javascript代码
Apr 20 Javascript
一个简单的弹性返回顶部JS代码实现介绍
Jun 09 Javascript
可以用鼠标拖动的DIV实现思路及代码
Oct 21 Javascript
JavaScript学习笔记(三):JavaScript也有入口Main函数
Sep 12 Javascript
Javascript 计算字符串在localStorage中所占字节数
Oct 21 Javascript
ES6/JavaScript使用技巧分享
Dec 14 Javascript
浅谈基于Vue.js的移动组件库cube-ui
Dec 20 Javascript
详解小程序原生使用ES7 async/await语法
Aug 06 Javascript
基于bootstrap页面渲染的问题解决方法
Aug 09 Javascript
Spring boot 和Vue开发中CORS跨域问题解决
Sep 05 Javascript
react实现移动端下拉菜单的示例代码
Jan 16 Javascript
vue 通过base64实现图片下载功能
Dec 19 Vue.js
基于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
德生9700DX电路分析
2021/03/02 无线电
PHP中for循环语句的几种变型
2007/03/16 PHP
PHP 实现explort() 功能的详解
2013/06/20 PHP
PHP结合jQuery.autocomplete插件实现输入自动完成提示的功能
2015/04/27 PHP
在Thinkphp中使用ajax实现无刷新分页的方法
2016/10/25 PHP
Ajax请求PHP后台接口返回信息的实例代码
2018/08/21 PHP
Laravel 微信小程序后端实现用户登录的示例代码
2019/11/26 PHP
JavaScript中函数声明优先于变量声明的实例分析
2012/03/01 Javascript
ajax页面无刷新 IE下遭遇Ajax缓存导致数据不更新的问题
2012/12/11 Javascript
IE关闭时判断及AJAX注销案例学习
2013/02/18 Javascript
简洁Ajax函数处理(示例代码)
2013/11/15 Javascript
利用了jquery的ajax实现二级联互动菜单
2013/12/02 Javascript
JS 实现列表与多选框选择附预览动画
2014/10/29 Javascript
JavaScript设计模式学习之“类式继承”
2015/03/12 Javascript
JS简单实现城市二级联动选择插件的方法
2015/08/19 Javascript
基于jQuery实现文本框只能输入数字(小数、整数)
2016/01/14 Javascript
jQuery 获取遍历获取table中每一个tr中的第一个td的方法
2016/10/05 Javascript
认识jQuery的Promise的具体使用方法
2017/10/10 jQuery
Vue-cli中为单独页面设置背景色的实现方法
2018/02/11 Javascript
JavaScript设计模式之单例模式原理与用法实例分析
2018/07/26 Javascript
解决layui表格的表头不滚动的问题
2019/09/04 Javascript
[01:58]2018DOTA2亚洲邀请赛趣味视频——交流
2018/04/03 DOTA
Python文件操作之合并文本文件内容示例代码
2017/09/19 Python
python使用多进程的实例详解
2018/09/19 Python
Python3实现的旋转矩阵图像算法示例
2019/04/03 Python
Python Numpy中数据的常用保存与读取方法
2020/04/01 Python
VScode连接远程服务器上的jupyter notebook的实现
2020/04/23 Python
容易被忽略的Python内置类型
2020/09/03 Python
python如何遍历指定路径下所有文件(按按照时间区间检索)
2020/09/14 Python
一款纯css3实现的圆形旋转分享按钮旋转角度可自己调整
2014/09/02 HTML / CSS
马来西亚时装购物网站:ZALORA马来西亚
2017/03/14 全球购物
英国最受欢迎的母婴精品品牌:JoJo Maman BéBé
2021/02/17 全球购物
如何查看在weblogic中已经发布的EJB
2012/06/01 面试题
房地产销售员的自我评价分享
2013/12/04 职场文书
2014年教师节寄语
2014/04/03 职场文书
2015年劳动部工作总结
2015/05/23 职场文书