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

前言

大家应该都知道，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了四个页面,这个也需要你自己定义,可简单创建几个页面尝试.

总结