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 相关文章推荐
webapp框架AngularUI的demo改造之路
Dec 21 Javascript
jQuery实现带有洗牌效果的动画分页实例
Aug 31 Javascript
用jquery快速解决IE输入框不能输入的问题
Oct 04 Javascript
AngularJS实现给动态生成的元素绑定事件的方法
Dec 14 Javascript
Angular 4依赖注入学习教程之组件服务注入(二)
Jun 04 Javascript
微信小程序 实现点击添加移除class
Jun 12 Javascript
详解ES6语法之可迭代协议和迭代器协议
Jan 13 Javascript
vue 注册组件的使用详解
May 05 Javascript
vuejs实现ready函数加载完之后执行某个函数的方法
Aug 31 Javascript
纯javascript实现选择框的全选与反选功能
Apr 08 Javascript
小程序rich-text组件如何改变内部img图片样式的方法
May 22 Javascript
JS实现字体背景跑马灯
Jan 06 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 eval函数用法 PHP中eval()函数小技巧
2012/10/31 PHP
PHP连接SQLServer2005的方法
2015/01/27 PHP
Windows下Apache + PHP SESSION丢失的解决过程全纪录
2015/04/07 PHP
js对图片base64编码字符串进行解码并输出图像示例
2014/03/17 Javascript
一个jquery实现的不错的多行文字图片滚动效果
2014/09/28 Javascript
jQuery实现的左右移动焦点图效果
2016/01/14 Javascript
javascript事件处理模型实例说明
2016/05/31 Javascript
详细分析Javascript中创建对象的四种方式
2016/08/17 Javascript
JS扩展类,克隆对象与混合类实例分析
2016/11/26 Javascript
Canvas实现动态的雪花效果
2017/02/13 Javascript
JQuery animate动画应用示例
2019/05/14 jQuery
详解基于 Node.js 的轻量级云函数功能实现
2019/07/08 Javascript
python的常见命令注入威胁
2013/02/18 Python
python进阶教程之异常处理
2014/08/30 Python
Python函数嵌套实例
2014/09/23 Python
Python的subprocess模块总结
2014/11/07 Python
python集合用法实例分析
2015/05/30 Python
搞笑的程序猿:看看你是哪种Python程序员
2015/06/12 Python
python学习 流程控制语句详解
2016/06/01 Python
python解决汉字编码问题:Unicode Decode Error
2017/01/19 Python
python导出hive数据表的schema实例代码
2018/01/22 Python
python MySQLdb使用教程详解
2018/03/20 Python
解决Python中定时任务线程无法自动退出的问题
2019/02/18 Python
Python跑循环时内存泄露的解决方法
2020/01/13 Python
Python grequests模块使用场景及代码实例
2020/08/10 Python
Pytest如何使用skip跳过执行测试
2020/08/13 Python
Python如何获取文件路径/目录
2020/09/22 Python
python线程池 ThreadPoolExecutor 的用法示例
2020/10/10 Python
Theo + George官方网站:都柏林时尚品牌
2019/04/08 全球购物
EJB包括(SessionBean,EntityBean)说出他们的生命周期,及如何管理事务的
2015/07/24 面试题
九年级数学教学反思
2014/02/02 职场文书
运动会入场解说词
2014/02/07 职场文书
2014年团支书工作总结
2014/11/14 职场文书
公司员工违法违章行为检讨书
2019/06/24 职场文书
Spring事务管理下synchronized锁失效问题的解决方法
2022/03/31 Java/Android
V Rising 服务器搭建图文教程
2022/06/16 Servers