import React, { Component } from \'react\';
import {StyleSheet,Text,Button,View,TabBarItem} from \'react-native\';
import {StackNavigator,TabNavigator} from \'react-navigation\';
import Icon from \'react-native-vector-icons/Feather\';//图标库
import { IS_ANDROID, IS_IOS } from \'./config/base\';
//底部导航栏 ----- start ---------
const TabSty = new Object();
if(IS_IOS){
TabSty = {
activeTintColor:\'#6b52ae\', //活动选项卡的标签和图标颜色。
// activeBackgroundColor:\'#000\',//活动选项卡的背景颜色
inactiveTintColor:\'#333\',//非活动选项卡的标签和图标颜色。
// inactiveBackgroundColor:\'#fff\',//非活动选项卡的背景颜色
labelStyle:{//标签标签的样式对象
fontSize:12,
marginBottom:5
}
}
}else if(IS_ANDROID){
TabSty = {
activeTintColor:\'#6b52ae\', //活动选项卡的标签和图标颜色。
inactiveTintColor:\'#333\',//非活动选项卡的标签和图标颜色。
showIcon:true,//是否显示标签图标，默认为false。
pressOpacity:0.1,//按下标签的不透明度
pressColor:\'#ccc\',//材质纹波的颜色（仅限Android> = 5.0）--按下的水印
tabStyle:{//选项卡的样式对象。
paddingTop:5
},
labelStyle:{//标签标签的样式对象
fontSize:12,
margin:0
},
//选项卡指示符的样式对象（选项卡底部的行）。
indicatorStyle:{
height:0
}
}
}
//标签栏的样式对象。
TabSty.style = {
height:50,
backgroundColor:\'#fff\'
}
const Tab = TabNavigator(
{
Home:{
screen: require(\'./components/index/index.js\').default,//该底部导航栏该项对应的页面
navigationOptions: ({ navigation }) => ({
title:\'消息\',//页面标题
tabBarLabel: \'消息\',//导航栏该项标题
tabBarIcon: ({ tintColor, focused }) => ( //tintColor -- 这个是 状态切换的时候给图标不同的颜色
<Icon name="message-square" style={{color:tintColor,fontSize:16}}/>
)
}),
},
Nearby:{
screen: require(\'./components/index/index.js\').default,
navigationOptions: ({ navigation }) => ({
title:\'工作台\',
tabBarLabel: \'工作台\',
tabBarIcon: ({ tintColor, focused }) => (
<Icon name="home" style={{color:tintColor,fontSize:16}}/>
)
}),
},
Message:{
screen: require(\'./components/index/index.js\').default,
navigationOptions: ({ navigation }) => ({
title:\'我的\',
tabBarLabel: \'我的\',
tabBarIcon: ({ tintColor, focused }) => (
<Icon name="user" style={{color:tintColor,fontSize:16}}/>
)
}),
}
},
{
tabBarPosition: \'bottom\',
swipeEnabled: true,//标签之间进行滑动
animationEnabled: true,
lazy: true,// 是否懒加载
tabBarOptions:TabSty
}
);
//底部导航栏 ----- end ---------
//定义 StackNavigator 导航跳转 --- start ------
//工作台模块
import indexRout from \'./rout/indexRout.js\';
const androidTitleSty = new Object();
const Navigator = StackNavigator(
{
Tab: {screen:Tab},
...indexRout
},
{
//设置导航栏公用的样式
navigationOptions:({ navigation }) => ({
//设置导航条的样式。背景色，宽高等
headerStyle:{
},
//设置导航栏文字样式
headerTitleStyle:{
flex:1,
textAlign:\'center\',
fontWeight:\'normal\',
fontSize:15,
color:\'#666\'
},
headerBackTitle:null,
//返回箭头重写
headerLeft:() => {
return <Icon name="chevron-left" onPress={()=>navigation.goBack()} style={styles.icon}/>;
}
})
},
);
//定义 StackNavigator 导航跳转 --- end ------
//样式
const styles = StyleSheet.create({
icon:{
fontSize:30,
color:\'#444\',
backgroundColor:\'transparent\'
}
});
export default Navigator;
indexRout.js：
这个js的内容其实完全可以放在 Navigator 这个里面的 Tab 下面只是我想把它分开，所以分开写了
//工作台路由 export default rout = { //固定投资 fixedInvestList:{ screen:require(\'../components/index/fixedInvest/list.js\').default, navigationOptions:({ navigation }) => ({ title:\'列表页面\' }) }, fixedInvestDetails:{ screen:require(\'../components/index/fixedInvest/details.js\').default, navigationOptions:({ navigation }) => ({ title:\'详情页面\' }) } }
图标库的使用 可以看这里 react-native-vector-icons 图标库使用