这次给大家带来TabBarIOS使用详解，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 ; }//这里定义了一个_addNavigator方法,接收两个参数页面名称与导航栏title_mainJudge(){ return( {this._addNavigator(Home, '首页')} {this._addNavigator(Message, '公告')} {this._addNavigator(Manager, '管理')} {this._addNavigator(About, '关于')} )}//_mainJudge方法是最核心的方法,用于对底部Tab以及顶部Title的布局,其中调用了几个方法上面已经做了说明. render() { return ( {this._mainJudge()} ); }}const styles = StyleSheet.create({ container:{ flex:1, opacity:1 },});
登录后复制
如图所示,导入的import Manager from ‘./manager’;Manager页面的内容就会显示在页面,其余页面也是同样的道理.
通常进入这样一个页面都是从登陆页面跳转到此页面,或者作为一个子页面呈现.另一个好处就是,拿我的项目为例,点击修改密码,显示如下图所示:
你会看到管理会自动移到左边,title修改为修改密码.就避免了,每个页面都需要定义一个导航栏产生的冗余代码.
如果你想自己完成这样的效果,你只需新建一个项目,新增一个页面,将我的代码拷贝进去即可,注意:我import了四个页面,这个也需要你自己定义,可简单创建几个页面尝试.
相信看了本文案例你已经掌握了方法，更多精彩请关注【创想鸟】其它相关文章！
推荐阅读：
以上就是TabBarIOS使用详解的详细内容，更多请关注【创想鸟】其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至253000106@qq.com举报，一经查实，本站将立刻删除。
发布者：PHP中文网，转转请注明出处：https://www.chuangxiangniao.com/p/2771291.html
