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了四个页面,这个也需要你自己定义,可简单创建几个页面尝试.
相信看了本文案例你已经掌握了方法，更多精彩请关注其它相关文章！
推荐阅读：
以上就是tabbarios使用详解的详细内容。