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 相关文章推荐
比较简单实用的使用正则三种版本的js去空格处理方法
Nov 18 Javascript
js带按钮的提示框可供选择示例代码
Sep 17 Javascript
基于jquery插件实现常见的幻灯片效果
Nov 01 Javascript
浏览器缩放检测的js代码
Sep 28 Javascript
超级简单的jquery操作表格方法
Dec 15 Javascript
AngularJS实现元素显示和隐藏的几个案例
Dec 09 Javascript
JS中用childNodes获取子元素换行会产生一个子元素
Dec 08 Javascript
Bootstarp 基础教程之表单部分实例代码
Feb 03 Javascript
详解vue-cli项目中的proxyTable跨域问题小结
Feb 09 Javascript
js 根据对象数组中的属性进行排序实现代码
Sep 12 Javascript
微信小程序自定义波浪组件使用方法详解
Sep 21 Javascript
react国际化化插件react-i18n-auto使用详解
Mar 31 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
用PHP和ACCESS写聊天室(四)
2006/10/09 PHP
PHP获取网卡地址的代码
2008/04/09 PHP
采用thinkphp自带方法生成静态html文件详解
2014/06/13 PHP
PHP中__autoload和Smarty冲突的简单解决方法
2016/04/08 PHP
PHP常用的三种设计模式汇总
2016/08/28 PHP
newxtree.js代码
2007/03/13 Javascript
js checkbox(复选框) 使用集锦
2009/04/28 Javascript
js操作checkbox遇到的问题解决
2013/06/29 Javascript
网站404页面3秒后跳到首页的实例代码
2013/08/16 Javascript
JavaScript实现基于Cookie的存储类实例
2015/04/10 Javascript
PhantomJS快速入门教程(服务器端的 JavaScript API 的 WebKit)
2015/08/06 Javascript
jquery表单验证插件formValidator使用方法
2016/04/01 Javascript
基于js实现二级下拉联动
2016/12/17 Javascript
详解JS取出两个数组中的不同或相同元素
2019/03/20 Javascript
jQuery内容选择器与表单选择器实例分析
2019/06/28 jQuery
[01:08]2014DOTA2展望TI 剑指西雅图LGD战队专访
2014/06/30 DOTA
Python continue语句用法实例
2014/03/11 Python
python执行get提交的方法
2015/04/29 Python
为Python程序添加图形化界面的教程
2015/04/29 Python
Python实现树的先序、中序、后序排序算法示例
2017/06/23 Python
Python实现的查询mysql数据库并通过邮件发送信息功能
2018/05/17 Python
Python实现的简单计算器功能详解
2018/08/25 Python
使用Python的toolz库开始函数式编程的方法
2018/11/15 Python
使用Python开发SQLite代理服务器的方法
2018/12/07 Python
Python实现 版本号对比功能的实例代码
2019/04/18 Python
Python生命游戏实现原理及过程解析(附源代码)
2019/08/01 Python
PyTorch: 梯度下降及反向传播的实例详解
2019/08/20 Python
使用python处理题库表格并转化为word形式的实现
2020/04/14 Python
毕业生求职推荐信
2013/11/04 职场文书
护理专业自我鉴定
2014/01/30 职场文书
剪彩仪式主持词
2014/03/19 职场文书
《埃及的金字塔》教学反思
2014/04/07 职场文书
弄虚作假心得体会
2014/09/10 职场文书
2015年党小组工作总结
2015/05/26 职场文书
债务追讨律师函
2015/06/24 职场文书
校园安全教育心得体会
2016/01/15 职场文书