React Native之Android Tabbar的實現.（ios 爲TabBarIOS

一個不錯的跨平臺開源模塊：https://github.com/exponentjs/react-native-tab-navigator

       接下來我來簡單說明如何應用，首先進入到項目的根目錄引入開源支持包：

          npm install react-native-tab-navigator --save    

      

         確保支持包導入進來.

       

         

  使用簡介：

<TabNavigator>
  <TabNavigator.Item
    selected={this.state.selectedTab === 'home'}
    title="Home"
    renderIcon={() => <Image source={...} />}
    renderSelectedIcon={() => <Image source={...} />}
    badgeText="1"
    onPress={() => this.setState({ selectedTab: 'home' })}>
    {homeView}
  </TabNavigator.Item>
  <TabNavigator.Item
    selected={this.state.selectedTab === 'profile'}
    title="Profile"
    renderIcon={() => <Image source={...} />}
    renderSelectedIcon={() => <Image source={...} />}
    renderBadge={() => <CustomBadgeView />}
    onPress={() => this.setState({ selectedTab: 'profile' })}>
    {profileView}
  </TabNavigator.Item>
</TabNavigator>

 

 

 

       經過使用簡介咱們能夠了解該組件如何使用，可是複雜的UI操做就得須要查看源碼瞭解究竟了，，好比：咱們要如何修改TabNavigator.Item的title樣式和badgeText的樣式.

源碼以下：

export default class TabNavigatorItem extends React.Component {
  static propTypes = {
    renderIcon: PropTypes.func,
    renderSelectedIcon: PropTypes.func,
    badgeText: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
    renderBadge: PropTypes.func,
    title: PropTypes.string,
    titleStyle: Text.propTypes.style,
    selectedTitleStyle: Text.propTypes.style,
    tabStyle: View.propTypes.style,
    selected: PropTypes.bool,
    onPress: PropTypes.func,
    allowFontScaling: PropTypes.bool,
  };

 

 

 

能夠看出renderIcon和renderSelectedIcon對應的PropTypes.func方法，我的感受這麼作很是好，可自定義性很是大，

 

selectedTitleStyle字面意思能夠看出是選中文字的樣式，而renderBadge對應的是渲染Badge的方法.

好比：

 <TabNavigator.Item
       title='頭條'
       renderIcon={()=><Image style={styles.tabIcon} source={TAB_NORMAL_1}/>}
       renderSelectedIcon={()=><Image style={styles.tabIcon} source={TAB_PRESS_1}/>}
       selected={this.state.selectedTab==='Home'}
       selectedTitleStyle={{color:'#f85959'}}
       onPress={()=>this.onPress('Home')}
       renderBadge={()=><View style={styles.badgeView}><Text style={styles.badgeText}>15</Text></View>}
      >

 

最後貼下所有代碼：

/**
 * Sample React Native App
 * https://github.com/facebook/react-native
 * @flow
 */

import React, { Component } from 'react';
import {
  AppRegistry,
  StyleSheet,
  Text,
  View,
  Image,
} from 'react-native';

//引入tabbar支持包
import TabNavigator from 'react-native-tab-navigator';

const TabNavigatorItem =TabNavigator.Item;

const TAB_NORMAL_1=require('./images/tabbar_1.png');
const TAB_NORMAL_2=require('./images/tabbar_2.png');
const TAB_NORMAL_3=require('./images/tabbar_3.png');
const TAB_NORMAL_4=require('./images/tabbar_4.png');

const TAB_PRESS_1=require('./images/tabbar_1_press.png');
const TAB_PRESS_2=require('./images/tabbar_2_press.png');
const TAB_PRESS_3=require('./images/tabbar_3_press.png');
const TAB_PRESS_4=require('./images/tabbar_4_press.png');

class toutiao extends Component {

  constructor(){
    super();
    this.state={
      selectedTab:'Home',
    }
  }

  /**
  tab點擊方法
  **/
  onPress(tabName){
    if(tabName){
      this.setState(
        {
          selectedTab:tabName,
        }
      );
    }
  }
   /**
   渲染每項
   **/
   renderTabView(title,tabName,tabContent,isBadge){
     var tabNomal;
     var tabPress;
     switch (tabName) {
       case 'Home':
         tabNomal=TAB_NORMAL_1;
         tabPress=TAB_PRESS_1;
         break;
     case 'Video':
       tabNomal=TAB_NORMAL_2;
       tabPress=TAB_PRESS_2;
       break;
     case 'Follow':
       tabNomal=TAB_NORMAL_3;
       tabPress=TAB_PRESS_3;
       break;
     case 'Mine':
       tabNomal=TAB_NORMAL_4;
       tabPress=TAB_PRESS_4;
       break;
       default:

     }
     return(
       <TabNavigatorItem
        title={title}
        renderIcon={()=><Image style={styles.tabIcon} source={tabNomal}/>}
        renderSelectedIcon={()=><Image style={styles.tabIcon} source={tabPress}/>}
        selected={this.state.selectedTab===tabName}
        selectedTitleStyle={{color:'#f85959'}}
        onPress={()=>this.onPress(tabName)}
        renderBadge={()=>isBadge?<View style={styles.badgeView}><Text style={styles.badgeText}>15</Text></View>:null}
       >
       <View style={{flex:1,justifyContent:'center',alignItems:'center'}}><Text>{tabContent}</Text></View>
       </TabNavigatorItem>
     );
   }

   /**
   自定義tabbar
   **/
  tabBarView(){
    return (
      <TabNavigator
       tabBarStyle={styles.tab}
      >
      {this.renderTabView('頭條','Home','頭條板塊',true)}
      {this.renderTabView('視頻','Video','視頻板塊',false)}
      {this.renderTabView('關注','Follow','關注板塊',false)}
      {this.renderTabView('個人','Mine','個人板塊',false)}
      </TabNavigator>
    );
  }

  render() {
    var tabBarView=this.tabBarView();
    return (
      <View style={styles.container}>
        {tabBarView}
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#F5FCFF',
  },
  welcome: {
    fontSize: 20,
    textAlign: 'center',
    margin: 10,
  },
  instructions: {
    textAlign: 'center',
    color: '#333333',
    marginBottom: 5,
  },
  tab:{
    height: 52,
    alignItems:'center',
    backgroundColor:'#f4f5f6',
  },
  tabIcon:{
    width:25,
    height:25,
  },
  badgeView:{
    width:22,
    height:14 ,
    backgroundColor:'#f85959',
    borderWidth:1,
    marginLeft:10,
    marginTop:3,
    borderColor:'#FFF',
    alignItems:'center',
    justifyContent:'center',
    borderRadius:8,
  },
  badgeText:{
    color:'#fff',
    fontSize:8,
  }
});

AppRegistry.registerComponent('toutiao', () => toutiao);

 

 

最後貼下效果圖：能夠看到實現了跨平臺體驗，不過因爲設備分辨率不統一因此適配上須要花些時間調整，總之來講仍是不錯的.