React Native中TabBarIOS的简单使用方法示例


Posted in Javascript onOctober 13, 2017

前言

大家应该都知道,TabBarIOS是RN中自带的组件,可直接使用,不用引用第三方组件,下面讲解TabBarIOS的使用方法,话不多说了,来一起看看详细的介绍吧。

首先看一下效果图,如下图所示:

React Native中TabBarIOS的简单使用方法示例
效果图

看完效果图再对代码进行说明.

import React, { Component } from 'react';
import {
 StyleSheet,
 View,
 TabBarIOS,
 NavigatorIOS,
 Navigator,
 AppRegistry,
 Image,
 TouchableHighlight,
 Platform,
} from 'react-native';
//首先导入需要的组件
import Home from './home';
import About from './about';
import Manager from './manager';
import Message from './message';
//这里是导入需要显示的页面
export default class Test extends Component {
 constructor(props){
   super(props);
   this.state = {
    selectedTab:'home',
    data:'',
    isLoadingShow: false,
    title:'首页',
   };
  }
//设置一个初始化默认首先显示首页
componentDidMount() {
 console.log("++++++++++++++++TabBarIOS测试+++++++++++++++");
 }
_selectTab(tabName) {
 this.setState({
  selectedTab: tabName
 });
 }
//修改底部Tab名称,通过状态进行控制
_selectTitle(title) {
 this.setState({
  title: title
 });
 }
//修改顶部导航栏的名称,与Tab名称的修改是同步的
_addNavigator(component, title) {
 let data = null;
 if(title === '公告'){
  data = this.state.data;
 }
 return <NavigatorIOS
  style={{flex:1}}
  barTintColor='#007AFF'
  titleTextColor="#fff"
  tintColor="#fff"
  translucent={false}
  initialRoute={{
   component,
   title,
   passProps:{
   data
   }
  }}
  />;
 }
//这里定义了一个_addNavigator方法,接收两个参数页面名称与导航栏title
_mainJudge(){

  return(

   <View style={{flex:1}}>
    <TabBarIOS barTintColor="#FFF">
    <TabBarIOS.Item
     icon={require('../imgs/phone_s.png')}
     title="首页"
     selected={this.state.selectedTab === 'home'}
     onPress={this._selectTab.bind(this, 'home')}
     >
     {this._addNavigator(Home, '首页')}
    </TabBarIOS.Item>

    <TabBarIOS.Item
     title="公告"
     icon={require('../imgs/gonggao.png')}
     selected={this.state.selectedTab === 'message'}
     onPress={this._selectTab.bind(this, 'message')}
     >
     {this._addNavigator(Message, '公告')}
    </TabBarIOS.Item>

    <TabBarIOS.Item
     title="管理"
     icon={require('../imgs/manager.png')}
     selected={this.state.selectedTab === 'manager'}
     onPress={this._selectTab.bind(this, 'manager')}
     >
     {this._addNavigator(Manager, '管理')}
    </TabBarIOS.Item>

    <TabBarIOS.Item
     title="关于"
     icon={require('../imgs/about.png')}
     selected={this.state.selectedTab === 'about'}
     onPress={this._selectTab.bind(this, 'about')}
     >
     {this._addNavigator(About, '关于')}
    </TabBarIOS.Item>
    </TabBarIOS>
   </View> 
   )
}
//_mainJudge方法是最核心的方法,用于对底部Tab以及顶部Title的布局,其中调用了几个方法上面已经做了说明.
 render() {
 return (
  <View style={styles.container}>
   {this._mainJudge()}
  </View>
 );
 }
}
const styles = StyleSheet.create({
 container:{
 flex:1,
 opacity:1
 },
});

如图所示,导入的import Manager from './manager';Manager页面的内容就会显示在页面,其余页面也是同样的道理.

React Native中TabBarIOS的简单使用方法示例
页面填充效果图

通常进入这样一个页面都是从登陆页面跳转到此页面,或者作为一个子页面呈现.另一个好处就是,拿我的项目为例,点击修改密码,显示如下图所示:

React Native中TabBarIOS的简单使用方法示例
内页效果图

你会看到管理会自动移到左边,title修改为修改密码.就避免了,每个页面都需要定义一个导航栏产生的冗余代码.

如果你想自己完成这样的效果,你只需新建一个项目,新增一个页面,将我的代码拷贝进去即可,注意:我import了四个页面,这个也需要你自己定义,可简单创建几个页面尝试.

总结

以上就是这篇文章的全部内容了,希望本文的内容对大家的学习或者工作具有一定的参考学习价值,如果有疑问大家可以留言交流,谢谢大家对三水点靠木的支持。

Javascript 相关文章推荐
Prototype使用指南之form.js
Jan 10 Javascript
JavaScript中this关键字使用方法详解
Mar 08 Javascript
js parsefloat parseint 转换函数
Jan 21 Javascript
Tinymce+jQuery.Validation使用产生的BUG
Mar 29 Javascript
查看图片(前进后退)功能实现js代码
Apr 24 Javascript
js原生之焦点图转换加定时器实例
Dec 12 Javascript
JQ中$(window).load和$(document).ready区别与执行顺序
Mar 01 Javascript
js判断PC端与移动端跳转
Dec 24 Javascript
微信小程序 登录的简单实现
Apr 19 Javascript
详解AngularJS用Interceptors来统一处理HTTP请求和响应
Jun 08 Javascript
基于input动态模糊查询的实现方法
Dec 12 Javascript
vue实现图片懒加载的方法分析
Feb 05 Javascript
ReactJS实现表单的单选多选和反选的示例
Oct 13 #Javascript
Angular.js通过自定义指令directive实现滑块滑动效果
Oct 13 #Javascript
捕获未处理的Promise错误方法
Oct 13 #Javascript
解决ie img标签内存泄漏的问题
Oct 13 #Javascript
jq源码解析之绑在$,jQuery上面的方法(实例讲解)
Oct 13 #jQuery
vue2组件之select2调用的示例代码
Oct 12 #Javascript
vue2.x select2 指令封装详解
Oct 12 #Javascript
You might like
PHP使用者状态管理功能的应用
2006/10/09 PHP
PHP实现定时生成HTML网站首页实例代码
2008/11/20 PHP
php download.php实现代码 跳转到下载文件(response.redirect)
2009/08/26 PHP
优化PHP程序的方法小结
2012/02/23 PHP
php常用数学函数汇总
2014/11/21 PHP
js 操作css实现代码
2009/06/11 Javascript
有关JavaScript的10个怪癖和秘密分享
2011/08/28 Javascript
js获取select选中的option的text示例代码
2013/12/19 Javascript
javascript中Array数组的迭代方法实例分析
2015/02/04 Javascript
在Mac OS下使用Node.js的简单教程
2015/06/24 Javascript
JavaScript 引用类型实例详解【数组、对象、严格模式等】
2020/05/13 Javascript
JavaScript如何判断对象有某属性
2020/07/03 Javascript
用ReactJS和Python的Flask框架编写留言板的代码示例
2015/12/19 Python
实例讲解Python中函数的调用与定义
2016/03/14 Python
Python黑帽编程 3.4 跨越VLAN详解
2016/09/28 Python
python win32 简单操作方法
2017/05/25 Python
人工智能最火编程语言 Python大战Java!
2017/11/13 Python
对python读写文件去重、RE、set的使用详解
2018/12/11 Python
超简单使用Python换脸实例
2019/03/27 Python
python 多进程和协程配合使用写入数据
2020/10/30 Python
Python 实现图片转字符画的示例(静态图片,gif皆可)
2020/11/05 Python
安装不同版本的tensorflow与models方法实现
2021/02/20 Python
html5嵌入内容_动力节点Java学院整理
2017/07/07 HTML / CSS
英国领先的体验日提供商:Buyagift
2019/04/19 全球购物
Dr. Martens马汀博士德国官网:马丁靴鼻祖
2019/12/26 全球购物
农业大学毕业生的个人自我评价
2013/10/11 职场文书
电信营业员自我评价分享
2014/01/17 职场文书
司仪主持词两篇
2014/03/22 职场文书
年度评优评先方案
2014/06/03 职场文书
车辆工程专业求职信
2014/06/14 职场文书
教师群众路线剖析材料
2014/09/29 职场文书
五四青年节活动总结
2015/02/10 职场文书
北京青年观后感
2015/06/15 职场文书
暑期家教宣传单
2015/07/14 职场文书
2015元旦感言
2015/12/09 职场文书
年终奖金发放管理制度,中小企业适用,拿去救急吧!
2019/07/12 职场文书