React Navigation2.0配置createBottomTabNavigator

// In App.js in a new project

import React,{ Component } from 'react';
import { View, Text ,StyleSheet,Image} from 'react-native';
import { createStackNavigator,createBottomTabNavigator  } from 'react-navigation';

import HelloWorld from '../components/HelloWorld.js';
import HomeScreen from '../components/HomeScreen.js';
import ModalScreen from '../components/ModalScreen.js';
import First from '../components/First.js';
import Second from '../components/Second.js';
import Login from '../pages/Login';
import Map from '../components/Map';
import FlatList from '../components/FlatList';
import SliderLife from '../components/SliderLife';
import FlatListSwipeout from '../components/FlatListSwipeout';
import CustomSlideRight from '../components/CustomSlideRight';
import Payment from '../pages/payment.js';

// 底部主界面
const BottomTabStack= createBottomTabNavigator(
  {
    First: {
      screen:First,
      navigationOptions: (sizeTabBar('首頁', 'First'))
    },
    Second: {
      screen:Second,
      navigationOptions: (sizeTabBar('地圖', 'Second'))
    },
    Payment: {
      screen:Payment,
      navigationOptions: (sizeTabBar('支付', 'Payment'))
    },
  },
  {
    tabBarOptions: {
      activeTintColor: '#00B36A',
      inactiveTintColor: '#8E8E93',
      labelStyle: {
        fontSize: 12,
      },
      tabStyle:{
      },
      showIcon: true,
      pressColor: 'black',
      pressOpacity: 0.6,
      style: {
        backgroundColor: '#fff',
        height:70,
      },
    }
  },
);

export const MainStack =createStackNavigator(
  {
    HomeScreen: { screen: HomeScreen },
    HelloWorld: { screen: HelloWorld },
    Login: { screen: Login },
    First: { screen: First },
    FlatList: { screen: FlatList },
    SliderLife: { screen: SliderLife },
    CustomSlideRight: { screen: CustomSlideRight },
    Payment: { screen: Payment },
    Main: { screen: BottomTabStack ,
      navigationOptions: {
          header: null,
      }
    },
    Map: { screen: Map,
      // 設置頭部header爲null
      // navigationOptions: {
      //     header: null,
      // }
    },
    Home: {screen: Login }
  },
  {
    initialRouteName: 'Main',
  }
)


export default class CustomNavigator extends React.Component {
  static router = MainStack.router;
  render() {
    const { navigation } = this.props;

    return <MainStack navigation={navigation} />;
  }
}

//配置tab圖標
function sizeTabBar(tabName, tabIndex) {
  // console.log(tabName,tabIndex);
  return {
    tabBarLabel: ()=>{
      return <Text style={{height:0}}></Text>
    },
    showLabel: false,
    showIcon:false,
    tabBarVisible:true,// 是否顯示底部導航
    pressOpacity:0.1,
    tabBarIcon: ({ tintColor, focused }) => {
      let imgIco = null;
      let imgDom = null;
      let imgStyle = null;
      switch (tabIndex) {
        case 'First':
          if (focused) {
            imgIco = require('../resource/images/homeactive.png');
          } else {
            imgIco = require('../resource/images/home.png');
          };
          imgStyle = styles.tabBarStyleHome;
          break;
        case 'Second':
          if (focused) {
            imgIco = require('../resource/images/mapactive.png');
          } else {
            imgIco = require('../resource/images/map.png');
          };
          imgStyle = styles.tabBarStyleMap;
          break;
        case 'Payment':
          if (focused) {
            imgIco = require('../resource/images/mapactive.png');
          } else {
            imgIco = require('../resource/images/map.png');
          };
          imgStyle = styles.tabBarStyleMap;
          break;
        default:
      }
      return <View style={styles.tabBarView}>
        <Image source={imgIco} style={imgStyle} />
        {tabIndex!=='Second'?(
          <View style={styles.tabBarText}>
            <Text>{tabName}</Text>
          </View>
        ):null}
      </View>
    },
  }
}

// 底部樣式
const styles = StyleSheet.create({
  tabBarStyleHome: {
    height: 20,
    width: 20,
  },
  tabBarStyleMap: {
    height: 19,
    width: 18,
  },
  tabBarStyleMessage: {
    height: 19,
    width: 22,
  },
  tabBarStyleMy: {
    height: 20,
    width: 18,
  },
  tabNameStyle:{
    flex:1,
    alignItems:'center',
    justifyContent:'center',
    backgroundColor:'red',
    textAlign:'center',
    height:30,
  },
  tabBarView:{
    flexDirection:'column',
    alignItems:'center',
    justifyContent:'center',
    height:70,
    position:'relative',
    bottom:0,

  },
  tabBarText:{
    alignItems:'center',
    justifyContent:'center',
  },
})