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 上效果是一樣的