前言

目前創(chuàng)新互聯(lián)已為超過千家的企業(yè)提供了網(wǎng)站建設(shè)、域名、虛擬空間、網(wǎng)站托管維護、企業(yè)網(wǎng)站設(shè)計、天元網(wǎng)站維護等服務(wù)，公司將堅持客戶導(dǎo)向、應(yīng)用為本的策略，正道將秉承"和諧、參與、激情"的文化，與客戶和合作伙伴齊心協(xié)力一起成長，共同發(fā)展。

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

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

效果圖

看完效果圖再對代碼進行說明.

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)入需要顯示的頁面
export default class Test extends Component {
 constructor(props){
   super(props);
   this.state = {
    selectedTab:'home',
    data:'',
    isLoadingShow: false,
    title:'首頁',
   };
  }
//設(shè)置一個初始化默認首先顯示首頁
componentDidMount() {
 console.log("++++++++++++++++TabBarIOS測試+++++++++++++++");
 }
_selectTab(tabName) {
 this.setState({
  selectedTab: tabName
 });
 }
//修改底部Tab名稱,通過狀態(tài)進行控制
_selectTitle(title) {
 this.setState({
  title: title
 });
 }
//修改頂部導(dǎo)航欄的名稱,與Tab名稱的修改是同步的
_addNavigator(component, title) {
 let data = null;
 if(title === '公告'){
  data = this.state.data;
 }
 return ;
 }
//這里定義了一個_addNavigator方法,接收兩個參數(shù)頁面名稱與導(dǎo)航欄title
_mainJudge(){

  return(

   
    
    
     {this._addNavigator(Home, '首頁')}
    

    
     {this._addNavigator(Message, '公告')}
    

    
     {this._addNavigator(Manager, '管理')}
    

    
     {this._addNavigator(About, '關(guān)于')}
    
    
    
   )
}
//_mainJudge方法是最核心的方法,用于對底部Tab以及頂部Title的布局,其中調(diào)用了幾個方法上面已經(jīng)做了說明.
 render() {
 return (
  
   {this._mainJudge()}
  
 );
 }
}
const styles = StyleSheet.create({
 container:{
 flex:1,
 opacity:1
 },
});

另外有需要云服務(wù)器可以了解下創(chuàng)新互聯(lián)scvps.cn，海內(nèi)外云服務(wù)器15元起步，三天無理由+7*72小時售后在線，公司持有idc許可證，提供“云服務(wù)器、裸金屬服務(wù)器、高防服務(wù)器、香港服務(wù)器、美國服務(wù)器、虛擬主機、免備案服務(wù)器”等云主機租用服務(wù)以及企業(yè)上云的綜合解決方案，具有“安全穩(wěn)定、簡單易用、服務(wù)可用性高、性價比高”等特點與優(yōu)勢，專為企業(yè)上云打造定制，能夠滿足用戶豐富、多元化的應(yīng)用場景需求。

分享標題：ReactNative中TabBarIOS的簡單使用方法示例-創(chuàng)新互聯(lián)
URL網(wǎng)址：http://weahome.cn/article/dddgdd.html