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

前端之家收集整理的这篇文章主要介绍了React Native中TabBarIOS的简单使用方法示例前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

前言

大家应该都知道,TabBarIOS是RN中自带的组件,可直接使用,不用引用第三方组件,下面讲解TabBarIOS的使用方法,话不多说了,来一起看看详细的介绍吧。

首先看一下效果图,如下图所示:

效果

看完效果图再对代码进行说明.

显示的页面 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,'首页')}
<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>
) } //_mainJudge方法是最核心的方法,用于对底部Tab以及顶部Title的布局,其中调用了几个方法上面已经做了说明. render() { return ( {this._mainJudge()} ); } } const styles = StyleSheet.create({ container:{ flex:1,opacity:1 },});

如图所示,导入的import Manager from './manager';Manager页面内容就会显示页面,其余页面也是同样的道理.

页面填充效果

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

内页效果

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

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

总结

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

猜你在找的JavaScript相关文章