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
使用简介：
<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);
效果图：可以看到实现了跨平台体验，不过由于设备分辨率不统一所以适配上需要花些时间调整，总之来说还是不错的.
