Detailed explanation of using TabBarIOS

This time I will bring you a detailed explanation of the use of TabBarIOS, what are the precautions when using TabBarIOS, the following is a practical case, let's take a look.

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=&#39;#007AFF&#39;
  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(&#39;../imgs/phone_s.png&#39;)}
     title="首页"
     selected={this.state.selectedTab === &#39;home&#39;}
     onPress={this._selectTab.bind(this, &#39;home&#39;)}
     >
     {this._addNavigator(Home, '首页')}
    </TabBarIOS.Item>
    <TabBarIOS.Item
     title="公告"
     icon={require(&#39;../imgs/gonggao.png&#39;)}
     selected={this.state.selectedTab === &#39;message&#39;}
     onPress={this._selectTab.bind(this, &#39;message&#39;)}
     >
     {this._addNavigator(Message, '公告')}
    </TabBarIOS.Item>
    <TabBarIOS.Item
     title="管理"
     icon={require(&#39;../imgs/manager.png&#39;)}
     selected={this.state.selectedTab === &#39;manager&#39;}
     onPress={this._selectTab.bind(this, &#39;manager&#39;)}
     >
     {this._addNavigator(Manager, '管理')}
    </TabBarIOS.Item>
    <TabBarIOS.Item
     title="关于"
     icon={require(&#39;../imgs/about.png&#39;)}
     selected={this.state.selectedTab === &#39;about&#39;}
     onPress={this._selectTab.bind(this, &#39;about&#39;)}
     >
     {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
 },
});

As shown in the figure, the imported import Manager from './manager'; the contents of the Manager page will be displayed on the page, and the same is true for other pages.

Usually when entering such a page, you jump to this page from the login page, or present it as a sub-page. Another advantage is that, taking my project as an example, click to change the password, and it will be displayed as shown below:

You will see that the management will automatically move to the left, and the title will be changed to change password. This will avoid the need to define a redundant code generated by a navigation bar on each page.

If you want to achieve this effect yourself, you only need to create a new project, Add a page, and copy my code into it. Note: I imported four pages, you also need to do this yourself Definition, you can simply create a few pages to try.

I believe you have mastered the method after reading the case in this article. For more exciting information, please pay attention to other related articles on the PHP Chinese website!

Recommended reading:

The above is the detailed content of Detailed explanation of using TabBarIOS. For more information, please follow other related articles on the PHP Chinese website!