react-navigation,StackNavigator,TabNavigator 导航使用

• 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: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 图标库使用 

在定义 底部导航栏的时候 之所以分为 ios  和 android  分开设置 ，是因为 2者的参数 和设置 还是有差别的，只是把  style  标签栏的样式对象，这个属性设置在一起的，具体的可以区看上面

的链接，就能清楚

效果如图

在android ，ios 上效果是一样的