快捷導(dǎo)航

React Native中TabBarIOS的簡(jiǎn)單使用方法示例

更新時(shí)間：2017年10月13日 09:32:49 作者：Hank_謝旱

最近在學(xué)習(xí)過(guò)程中遇到了很多問(wèn)題,TabBarIOS的使用就是一個(gè)，所以下面這篇文章主要給大家介紹了關(guān)于React Native中TabBarIOS簡(jiǎn)單使用的相關(guān)資料，文中通過(guò)示例代碼介紹的非常詳細(xì)，需要的朋友可以參考下。

前言

大家應(yīng)該都知道，TabBarIOS是RN中自帶的組件,可直接使用,不用引用第三方組件,下面講解TabBarIOS的使用方法，話(huà)不多說(shuō)了，來(lái)一起看看詳細(xì)的介紹吧。

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

效果圖

看完效果圖再對(duì)代碼進(jìn)行說(shuō)明.

import React, { Component } from 'react';
import {
 StyleSheet,
 View,
 TabBarIOS,
 NavigatorIOS,
 Navigator,
 AppRegistry,
 Image,
 TouchableHighlight,
 Platform,
} from 'react-native';
//首先導(dǎo)入需要的組件
import Home from './home';
import About from './about';
import Manager from './manager';
import Message from './message';
//這里是導(dǎo)入需要顯示的頁(yè)面
export default class Test extends Component {
 constructor(props){
   super(props);
   this.state = {
    selectedTab:'home',
    data:'',
    isLoadingShow: false,
    title:'首頁(yè)',
   };
  }
//設(shè)置一個(gè)初始化默認(rèn)首先顯示首頁(yè)
componentDidMount() {
 console.log("++++++++++++++++TabBarIOS測(cè)試+++++++++++++++");
 }
_selectTab(tabName) {
 this.setState({
  selectedTab: tabName
 });
 }
//修改底部Tab名稱(chēng),通過(guò)狀態(tài)進(jìn)行控制
_selectTitle(title) {
 this.setState({
  title: title
 });
 }
//修改頂部導(dǎo)航欄的名稱(chēng),與Tab名稱(chēng)的修改是同步的
_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
   }
  }}
  />;
 }
//這里定義了一個(gè)_addNavigator方法,接收兩個(gè)參數(shù)頁(yè)面名稱(chēng)與導(dǎo)航欄title
_mainJudge(){

  return(

   <View style={{flex:1}}>
    <TabBarIOS barTintColor="#FFF">
    <TabBarIOS.Item
     icon={require('../imgs/phone_s.png')}
     title="首頁(yè)"
     selected={this.state.selectedTab === 'home'}
     onPress={this._selectTab.bind(this, 'home')}
     >
     {this._addNavigator(Home, '首頁(yè)')}
    </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="關(guān)于"
     icon={require('../imgs/about.png')}
     selected={this.state.selectedTab === 'about'}
     onPress={this._selectTab.bind(this, 'about')}
     >
     {this._addNavigator(About, '關(guān)于')}
    </TabBarIOS.Item>
    </TabBarIOS>
   </View> 
   )
}
//_mainJudge方法是最核心的方法,用于對(duì)底部Tab以及頂部Title的布局,其中調(diào)用了幾個(gè)方法上面已經(jīng)做了說(shuō)明.
 render() {
 return (
  <View style={styles.container}>
   {this._mainJudge()}
  </View>
 );
 }
}
const styles = StyleSheet.create({
 container:{
 flex:1,
 opacity:1
 },
});

如圖所示,導(dǎo)入的import Manager from './manager';Manager頁(yè)面的內(nèi)容就會(huì)顯示在頁(yè)面,其余頁(yè)面也是同樣的道理.

頁(yè)面填充效果圖