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 相关文章推荐
在IE6下发生Internet Explorer cannot open the Internet site错误
Jun 21 Javascript
javascript中运用闭包和自执行函数解决大量的全局变量问题
Dec 30 Javascript
javascript学习笔记(五)正则表达式
Apr 08 Javascript
setTimeout自动触发一个js的方法
Jan 15 Javascript
jQuery使用元素属性attr赋值详解
Feb 27 Javascript
JavaScript基于ajax编辑信息用法实例
Jul 15 Javascript
轻松学习jQuery插件EasyUI EasyUI表单验证
Dec 01 Javascript
Angularjs实现mvvm式的选项卡示例代码
Sep 08 Javascript
Vue.js移动端左滑删除组件的实现代码
Sep 08 Javascript
JavaScript格式化json和xml的方法示例
Jan 22 Javascript
微信小程序 生成携带参数的二维码
Oct 23 Javascript
通过实例解析jQ Ajax操作相关原理
Sep 23 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 远程关机实现代码
2009/11/10 PHP
php利用header函数实现文件下载时直接提示保存
2009/11/12 PHP
php的闭包(Closure)匿名函数详解
2015/02/22 PHP
PHP实现自动对图片进行滚动显示的方法
2015/03/12 PHP
PHP For循环字母A-Z当超过26个字母时输出AA,AB,AC
2020/02/16 PHP
ASP中进行HTML数据及JS数据编码函数
2009/11/11 Javascript
Javascript读取cookie函数代码
2010/10/16 Javascript
js对文章内容进行分页示例代码
2014/03/05 Javascript
修改或扩展jQuery原生方法的代码实例
2015/01/13 Javascript
jQuery入门介绍之基础知识
2015/01/13 Javascript
jQuery插件Validate实现自定义校验结果样式
2016/01/18 Javascript
js实现上一页下一页的效果【附代码】
2016/03/10 Javascript
Bootstrap教程JS插件弹出框学习笔记分享
2016/05/17 Javascript
异步加载JS、CSS代码(推荐)
2016/06/15 Javascript
HTML5 canvas 9绘制图片实例详解
2016/09/06 Javascript
jQuery实现鼠标响应式淘宝动画效果示例
2018/02/13 jQuery
Vue中mintui的field实现blur和focus事件的方法
2018/08/25 Javascript
Javascript之高级数组API的使用实例
2019/03/08 Javascript
[01:34]2016国际邀请赛中国区预选赛IG战队教练采访
2016/06/27 DOTA
pyqt5的QWebEngineView 使用模板的方法
2018/08/18 Python
Python3.5内置模块之os模块、sys模块、shutil模块用法实例分析
2019/04/27 Python
Python爬虫实现的根据分类爬取豆瓣电影信息功能示例
2019/09/15 Python
浅谈python 中的 type(), dtype(), astype()的区别
2020/04/09 Python
OpenCV读取与写入图片的实现
2020/10/13 Python
Python+MySQL随机试卷及答案生成程序的示例代码
2021/02/01 Python
css3打造一款漂亮的卡哇伊按钮
2013/03/20 HTML / CSS
总结30个CSS3选择器
2017/04/13 HTML / CSS
如何用canvas实现在线签名的示例代码
2018/07/10 HTML / CSS
HTML如何让IMG自动适应DIV容器大小的实现方法
2020/02/25 HTML / CSS
蒙蒂塞罗商店:Monticello Shop
2018/11/25 全球购物
《记承天寺夜游》教学反思
2014/02/16 职场文书
党员公开承诺书范文
2014/03/25 职场文书
小学生开学第一课活动方案
2014/03/27 职场文书
企业精神口号
2014/06/11 职场文书
2015年学校远程教育工作总结
2015/07/20 职场文书
Spring中的@Transactional的工作原理
2022/06/05 Java/Android