当前位置： 移动技术网 > IT编程>开发语言>JavaScript > React Native中TabBarIOS的简单使用方法示例

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

2017年12月12日  | 移动技术网IT编程  | 我要评论

前言

大家应该都知道，tabbarios是rn中自带的组件,可直接使用,不用引用第三方组件,下面讲解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页面的内容就会显示在页面,其余页面也是同样的道理.


页面填充效果图

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


内页效果图

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

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

总结

以上就是这篇文章的全部内容了，希望本文的内容对大家的学习或者工作具有一定的参考学习价值，如果有疑问大家可以留言交流，谢谢大家对移动技术网的支持。

您可能感兴趣的文章:

如对本文有疑问， 点击进行留言回复！！

相关文章:

验证码：
最近更新的文章
大家感兴趣的文章
移动技术网