在构建TabBar的方式上，使用React-native-tab-navigator（https://github.com/exponentjs/react-native-tab-navigator）
干货直接上代码
一：项目集成React-native-tab-navigator
在当前项目下 终端运行：npm install react-native-tab-navigator –save下载
显示 @xx.xx.x 版本号且 在 项目的根目录的 \node_modules下面出现这个文件react-native-tab-navigator 后就说明下载集成成功
二：引入react-native-tab-navigator
import TabNavigator from 'react-native-tab-navigator';
import React,{ Component } from 'react';
import TabNavigator from 'react-native-tab-navigator';
import {
AppRegistry,Text,View,Navigator,StyleSheet,Image,TouchableHighlight
} from 'react-native';
import HomeComponent from './HomeComponent';
import CustomerComponent from './CustomerComponent';
import OrderComponent from './OrderComponent';
import ProductComponent from './ProductComponent';
import mineComponent from './mineComponent';
export default class Main extends Component
{
constructor(props) {
super(props);
this.state = {
selectedTab:'home'
};
}
render() {
return (
<View style={styles.container} >
<TabNavigator tabBarStyle={styles.tab}>
<TabNavigator.Item
selected={this.state.selectedTab === '首页'}
title="首页"
titleStyle={styles.tabText}
selectedTitleStyle={styles.selectedTabText}
renderIcon={() => <Image source={require('./img/ic_home_normal.png')} style={styles.icon}/> }
renderSelectedIcon={() => <Image style={styles.icon} source={require('./img/ic_home_checked.png')} />}
onPress={() => this.setState({ selectedTab: '首页' })}>
<HomeComponent/>
</TabNavigator.Item>
<TabNavigator.Item
selected={this.state.selectedTab === '订单'}
title="订单"
titleStyle={styles.tabText}
selectedTitleStyle={styles.selectedTabText}
renderIcon={() => <Image source={require('./img/ic_order_normal.png')} style={styles.icon}/> }
renderSelectedIcon={() => <Image style={styles.icon} source={require('./img/ic_order_checked.png')} />}
onPress={() => this.setState({ selectedTab: '订单' })}>
<OrderComponent />
</TabNavigator.Item>
<TabNavigator.Item
selected={this.state.selectedTab === '客户'}
title="客户"
titleStyle={styles.tabText}
selectedTitleStyle={styles.selectedTabText}
renderIcon={() => <Image source={require('./img/ic_customer_normal.png')} style={styles.icon}/> }
renderSelectedIcon={() => <Image style={styles.icon} source={require('./img/ic_customer_checked.png')} />}
onPress={() => this.setState({ selectedTab: '客户' })}>
<CustomerComponent />
</TabNavigator.Item>
<TabNavigator.Item
selected={this.state.selectedTab === '产品'}
title="产品"
titleStyle={styles.tabText}
selectedTitleStyle={styles.selectedTabText}
renderIcon={() => <Image source={require('./img/ic_product_normal.png')} style={styles.icon}/> }
renderSelectedIcon={() => <Image style={styles.icon} source={require('./img/ic_product_checked.png')} />}
onPress={() => this.setState({ selectedTab: '产品' })}>
<ProductComponent />
</TabNavigator.Item>
<TabNavigator.Item
selected={this.state.selectedTab === '我的'}
title="我的"
titleStyle={styles.tabText}
selectedTitleStyle={styles.selectedTabText}
renderIcon={() => <Image source={require('./img/ic_mine_normal.png')} style={styles.icon}/> }
renderSelectedIcon={() => <Image style={styles.icon} source={require('./img/ic_mine_checked.png')} />}
onPress={() => this.setState({ selectedTab: '我的' })}>
<mineComponent />
</TabNavigator.Item>
</TabNavigator>
</View>
);
}
}
const styles = StyleSheet.create({
container: {
flex: 1
},tab: {
height: 70,backgroundColor: '#222222',alignItems: 'center'
},tabText: {
marginTop: 1,color: '#ffffff',fontSize: 16
},selectedTabText: {
marginTop: 1,color: '#FFD700',icon: {
width: 30,height: 31,resizeMode: 'stretch',marginTop: 10
}
});
2.TabNavigator的样式设置
上面的代码当中，TabNavigator继承于View类，除了包括style的一些属性可以和View控件一样设置外，它还具有其他一些独特的属性，用于控制样式scenestyle：场景样式，即Tab页容器的样式，可按View的style设置
tabBarStyle：TabBar的样式，基本也可按照普通的style写法进行设置
tabBarShadowStyle：TabBar阴影的样式，不过对于扁平化的设计，这个属性应该用处不大
hidesTabTouch：bool类型，即是否隐藏Tab按钮的按下效果
根据我们上面对TabBar样式的分析，我们可以按照如下样式，为TabNavigator指定tabBarStyle
根据主题设置背景颜色为黑色
const styles = StyleSheet.create({
tab: {
height: 70,alignItems: 'center'
}
}
3.Item的构建
TabNavigator的Item就是我们所看到的5个Tab按钮以及它们所对应的页面，这些页面在Android中可能以Fragment呈现，在iOS中可能以UIView呈现，而在React Native中，则是一个<View>，我们可以自己义，也可以直接放置其他控件。
这些Item在TabNavigator中，以<TabNavigator.Item>形式呈现，其可设置的相关属性如下：
renderIcon: 必填项，即图标，但为function类型，所以这里需要用到Arrow Function
renderSelectedIcon: 选中状态的图标，非必填，也是function类型
badgeText: 即Tab右上角的提示文字，可为String或Number，类似QQ中Tab右上角的消息提示，非必填
renderBadge: 提示角标渲染方式，function类型，类似render的使用，非必填
title: 标题，String类型，非必填
titleStyle: 标题样式，style类型，非必填
selectedTitleStyle: 选中标题样式，style类型，非必填
selected: bool型，是否选中状态，可使用setState进行控制，默认false
onPress: function型，即点击事件的回调函数，这里需要控制的是state，而切换页面已经由控件本身帮我们实现好了
allowFontScaling: bool型，是否允许字体缩放，默认false
而对于我们所关心的页面切换，在TabNavigator.Item中，可将其置于<TabNavigator.Item>{<View/>}</TabNavigator.Item>之中，即作为Item的子元素存在，这里请注意：如果添加了一个Item，必须为其添加一个View，否则将无法运行！
这里提醒大家：
如果使用本地图片，即在<Image>中，source属性内使用require的形式引用图片，由于js本身的性质，不可以使用动态的require，而应该直接require后的图片资源当做参数传递！而使用uri形式获取在线资源不受影响
在上面的代码中，由于TabBar控件的问题，我们可以在tabIcon样式中，控制Icon的上边距，以达到居中的效果，代码如下：
icon: {width: 30,
height: 31,
resizeMode: 'stretch',
marginTop: 10
}
这里说明：
1.特别注意：由于在onPress函数中调用了this.setState，所以必须在类的使用构造函数，并对state进行初始化：
constructor(props) {
super(props);
this.state = {
selectedTab:'home'
};
}
效果图：
