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 相关文章推荐
基于jQuery实现点击同时更改两个iframe的网址
Jul 01 Javascript
javascript中数组的多种定义方法和常用函数简介
May 09 Javascript
js 右侧浮动层效果实现代码(跟随滚动)
Nov 22 Javascript
基于JavaScript实现图片点击弹出窗口而不是保存
Feb 06 Javascript
由简入繁实现Jquery树状结构的方法(推荐)
Jun 10 Javascript
如何制作幻灯片(代码分享)
Jan 06 Javascript
JS中Attr的用法详解
Oct 09 Javascript
JavaScript实现获取select下拉框中第一个值的方法
Feb 06 Javascript
微信小程序自定义对话框弹出和隐藏动画
Jul 19 Javascript
浅谈vue 单文件探索
Sep 05 Javascript
微信小程序城市选择及搜索功能的方法
Mar 22 Javascript
在element-ui的select下拉框加上滚动加载
Apr 18 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 Warning: Module 'modulename' already loaded in问题解决办法
2015/03/16 PHP
php类的自动加载操作实例详解
2016/09/28 PHP
使用PHPMailer发送邮件实例
2017/02/15 PHP
PHP控制反转(IOC)和依赖注入(DI)
2017/03/13 PHP
jQuery toggle()设置CSS样式
2009/11/05 Javascript
Javascript实现滑块滑动改变值的实现代码
2013/04/12 Javascript
JavaScript实现添加及删除事件的方法小结
2015/08/04 Javascript
js实现网页抽奖实例
2015/08/05 Javascript
JavaScript中循环遍历Array与Map的方法小结
2016/03/12 Javascript
JS经典正则表达式笔试题汇总
2016/12/15 Javascript
AngularJS 单选框及多选框的双向动态绑定
2017/04/20 Javascript
JavaScript实现随机数生成器(去重)
2017/10/13 Javascript
JS块级作用域和私有变量实例分析
2019/05/11 Javascript
简述vue-cli中chainWebpack的使用方法
2019/07/30 Javascript
JS实现秒杀倒计时特效
2020/01/02 Javascript
JavaScript实现联动菜单特效
2020/01/07 Javascript
three.js 如何制作魔方
2020/07/31 Javascript
jquery实现拖拽添加元素功能
2020/12/01 jQuery
跟老齐学Python之折腾一下目录
2014/10/24 Python
python实现学生管理系统
2018/01/11 Python
Python+Selenium+phantomjs实现网页模拟登录和截图功能(windows环境)
2019/12/11 Python
TENSORFLOW变量作用域(VARIABLE SCOPE)
2020/01/10 Python
keras获得model中某一层的某一个Tensor的输出维度教程
2020/01/24 Python
python小白切忌乱用表达式
2020/05/29 Python
硕士研究生自我鉴定范文
2013/12/27 职场文书
新领导上任欢迎词
2014/01/13 职场文书
个人承诺书怎么写
2014/05/24 职场文书
最美乡村医生事迹材料
2014/06/02 职场文书
竞赛口号大全
2014/06/16 职场文书
大学生党员批评与自我批评
2014/09/28 职场文书
2014年电信员工工作总结
2014/12/19 职场文书
高中生毕业评语
2014/12/30 职场文书
特种设备安全管理制度
2015/08/06 职场文书
班干部竞选演讲稿(精选5篇)
2019/09/24 职场文书
Python实现socket库网络通信套接字
2021/06/04 Python
vue实现Toast组件轻提示
2022/04/10 Vue.js