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 lazyload延迟加载技术的实现原理分析
Jan 24 Javascript
Google (Local) Search API的简单使用介绍
Nov 28 Javascript
非jQuery实现照片散落桌子上,单击放大的LightBox效果
Nov 28 Javascript
jQuery 处理页面的事件详解
Jan 20 Javascript
详解JavaScript中this关键字的用法
May 26 Javascript
使用Ajax与服务器(JSON)通信实例
Nov 04 Javascript
Angular使用ng-messages与PHP进行表单数据验证
Dec 28 Javascript
jQuery开源组件BootstrapValidator使用详解
Jun 29 jQuery
如何理解Vue的作用域插槽的实现原理
Aug 19 Javascript
Vue中的验证登录状态的实现方法
Mar 09 Javascript
JavaScript编写开发动态时钟
Jul 29 Javascript
使用react-virtualized实现图片动态高度长列表的问题
May 28 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
IIS6+PHP5+MySQL5+Zend Optimizer+phpMyAdmin安装配置图文教程 2009年
2009/06/08 PHP
PHP设计模式之观察者模式实例
2016/02/22 PHP
yii的入口文件index.php中为什么会有这两句
2016/08/04 PHP
php实现在新浪云中使用imagick生成缩略图并上传的方法
2016/09/26 PHP
PHP开发实现快递查询功能详解
2019/04/08 PHP
php与阿里云短信接口接入操作案例分析
2020/05/27 PHP
面向对象的Javascript之三(封装和信息隐藏)
2012/01/27 Javascript
JS事件Event元素(兼容IE,Firefox,Chorme)
2012/11/01 Javascript
Jquery 改变radio/checkbox选中状态,获取选中的值(示例代码)
2013/12/12 Javascript
jQuery实现的一个自定义Placeholder属性插件
2014/08/11 Javascript
js打造数组转json函数
2015/01/14 Javascript
在JS中操作时间之getUTCMilliseconds()方法的使用
2015/06/10 Javascript
JavaScript中最容易混淆的作用域、提升、闭包知识详解(推荐)
2016/09/05 Javascript
关于webpack代码拆分的解析
2017/07/20 Javascript
JavaScript设计模式之享元模式实例详解
2019/01/17 Javascript
vue 将多个过滤器封装到一个文件中的代码详解
2020/09/05 Javascript
[30:55]完美世界DOTA2联赛PWL S2 Magma vs LBZS 第二场 11.18
2020/11/18 DOTA
使用Python的Tornado框架实现一个简单的WebQQ机器人
2015/04/24 Python
Python自定义类的数组排序实现代码
2016/08/28 Python
Sublime开发python程序的示例代码
2018/01/24 Python
python生成器与迭代器详解
2019/01/01 Python
用Python实现将一张图片分成9宫格的示例
2019/07/05 Python
在vscode中配置python环境过程解析
2019/09/28 Python
tensorflow tf.train.batch之数据批量读取方式
2020/01/20 Python
python使用隐式循环快速求和的实现示例
2020/09/11 Python
windows下python 3.9 Numpy scipy和matlabplot的安装教程详解
2020/11/28 Python
海淘零差价,宝贝全球购: 宝贝格子
2016/08/24 全球购物
戴森台湾线上商城:Dyson Taiwan
2018/05/21 全球购物
LN-CC美国:伦敦时尚生活的缩影
2019/02/19 全球购物
学习标兵获奖感言
2014/02/20 职场文书
离职证明标准格式
2014/09/15 职场文书
民事诉讼代理授权委托书范本
2014/10/08 职场文书
项目经理岗位职责范本
2015/04/01 职场文书
导游词之江西赣州
2019/10/15 职场文书
python前后端自定义分页器
2022/04/13 Python
Redis基本数据类型String常用操作命令
2022/06/01 Redis