TabBarIOS使用詳解

這次帶給大家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 <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
 },
});

如圖所示,導入的import Manager from './manager';Manager頁面的內容就會顯示在頁面,其餘頁面也是同樣的道理.

# 通常進入這樣一個頁面都是從登陸頁面跳到此頁面,或者作為一個子頁面呈現.另一個好處就是,拿我的項目為例,點擊修改密碼,顯示如下圖所示:

你會看到管理會自動移到左邊,title修改為修改密碼.就避免了,每個頁面都需要定義一個導航欄產生的冗餘代碼.

# 如果你想自己完成這樣的效果,你只需新建一個專案,新增一個頁面,將我的程式碼拷貝進去即可,注意:我import了四個頁面,這個也需要你自己定義,可簡單創建幾個頁面嘗試.

相信看了本文案例你已經掌握了方法，更多精彩請關注php中文網其它相關文章！

推薦閱讀：

#

以上是TabBarIOS使用詳解的詳細內容。更多資訊請關注PHP中文網其他相關文章！