- StackNavigator 参考这里
- TabNavigator 参考这里
是一个组合,我把这2个写在一起了
代码:
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:,
marginBottom:
}
}
}else if(IS_ANDROID){
TabSty = {
activeTintColor:'#6b52ae', //活动选项卡的标签和图标颜色。
inactiveTintColor:'#333',//非活动选项卡的标签和图标颜色。
showIcon:true,//是否显示标签图标,默认为false。
pressOpacity:0.1,//按下标签的不透明度
pressColor:'#ccc',//材质纹波的颜色(仅限Android> = 5.0)--按下的水印
tabStyle:{//选项卡的样式对象。
paddingTop:
},
labelStyle:{//标签标签的样式对象
fontSize:,
margin:
},
//选项卡指示符的样式对象(选项卡底部的行)。
indicatorStyle:{
height:
}
}
}
//标签栏的样式对象。
TabSty.style = {
height:,
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:}}/>
)
}),
},
Nearby:{
screen: require('./components/index/index.js').default,
navigationOptions: ({ navigation }) => ({
title:'工作台',
tabBarLabel: '工作台',
tabBarIcon: ({ tintColor, focused }) => (
<Icon name="home" style={{color:tintColor,fontSize:}}/>
)
}),
},
Message:{
screen: require('./components/index/index.js').default,
navigationOptions: ({ navigation }) => ({
title:'我的',
tabBarLabel: '我的',
tabBarIcon: ({ tintColor, focused }) => (
<Icon name="user" style={{color:tintColor,fontSize:}}/>
)
}),
}
},
{
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:,
textAlign:'center',
fontWeight:'normal',
fontSize:,
color:'#666'
},
headerBackTitle:null,
//返回箭头重写
headerLeft:() => {
return <Icon name="chevron-left" onPress={()=>navigation.goBack()} style={styles.icon}/>;
}
})
},
);
//定义 StackNavigator 导航跳转 --- end ------
//样式
const styles = StyleSheet.create({
icon:{
fontSize:,
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 图标库使用
在定义 底部导航栏的时候 之所以分为 ios 和 android 分开设置 ,是因为 2者的参数 和设置 还是有差别的,只是把 style 标签栏的样式对象,这个属性设置在一起的,具体的可以区看上面
的链接,就能清楚
效果如图
在android ,ios 上效果是一样的