React Native之Android Tabbar的实现.

       React是Facebook开源出来的一套前段框架，据目测是目前最热门的一套框架，随之而来是(RN)React Native，这套框架的意义重大，颠覆的不仅仅是移动开发者，连整个应用市场都会受到影响的，所以身为移动的开发者，快速学习起来吧，跟随市场的前沿.

       接下来讲解的是Android中如何实现TabBar，都知道RN中针对IOS有TabBarIOS组件而针对安卓并没有类似的组件，因为是从安卓原生转过来的，所以能力有限，只能借助高手来实现自己的功能模块.

       一个不错的跨平台开源模块：https://github.com/exponentjs/react-native-tab-navigator

       接下来我来简单说明如何应用，首先进入到项目的根目录引入开源支持包：

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

      

         确保支持包导入进来.

       

         

  使用简介：

   }
    renderSelectedIcon={() => }
    badgeText="1"
    onPress={() => this.setState({ selectedTab: 'home' })}>
    {homeView}
  
   }
    renderSelectedIcon={() => }
    renderBadge={() => }
    onPress={() => this.setState({ selectedTab: 'profile' })}>
    {profileView}
  

       通过使用简介我们可以了解该组件如何使用，但是复杂的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的方法.

比如：

 }
       renderSelectedIcon={()=>}
       selected={this.state.selectedTab==='Home'}
       selectedTitleStyle={{color:'#f85959'}}
       onPress={()=>this.onPress('Home')}
       renderBadge={()=>15}
      >

最后贴下全部代码：

/**
 * 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(
       }
        renderSelectedIcon={()=>}
        selected={this.state.selectedTab===tabName}
        selectedTitleStyle={{color:'#f85959'}}
        onPress={()=>this.onPress(tabName)}
        renderBadge={()=>isBadge?15:null}
       >
       {tabContent}
       
     );
   }

   /**
   自定义tabbar
   **/
  tabBarView(){
    return (
      
      {this.renderTabView('头条','Home','头条板块',true)}
      {this.renderTabView('视频','Video','视频板块',false)}
      {this.renderTabView('关注','Follow','关注板块',false)}
      {this.renderTabView('我的','Mine','我的板块',false)}
      
    );
  }


  render() {
    var tabBarView=this.tabBarView();
    return (
      
        {tabBarView}
      
    );
  }
}

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);

最后贴下效果图：可以看到实现了跨平台体验，不过由于设备分辨率不统一所以适配上需要花些时间调整，总之来说还是不错的.

           

         

    源码下载