createStackNavigator, createBott

使用tabNavigator时，总是会报警告，查了一下官网发现是已经过期，故使用了createStackNavigator和createBottomTabNavigator结合起来搭建项目框架，项目结构为：
根控制器为createBottomTabNavigator，管理着4个createStackNavigator，每个createStackNavigator下对应着一个控制器，
页面效果如下：

WechatIMG5.jpeg

当使用android和ios默认的导航栏时，ios的标题是居中的，Android是居左的，此时可以做如下修改：
去 node_modules/react-navigation/src/views/Header/Header.js中的 title 属性一栏里，大概在595行，把
justifyContent: Platform.OS === 'ios' ? 'center' : 'flex-start',
改为
justifyContent: Platform.OS === 'ios' ? 'center' : 'center',

具体代码如下：
import React, { Component } from 'react';
import {
Platform,
Image,
} from 'react-native';

import {createStackNavigator, createBottomTabNavigator} from 'react-navigation';

//导入外部组建
import Home from '../Comps/Home'
import Case from '../Comps/Case'
import Educate from '../Comps/Educate'
import Mine from '../Comps/Mine'

export default class Main extends Component<Props> {

render() {
    return (
            <TabContainer/>
        );
}

}

const TabContainer = createBottomTabNavigator(
// RouteConfigs
{
首页:createStackNavigator(
// RouteConfigs
{
screen:Home,
},
// StackNavigatorConfig
{
headerMode:'screen',
mode:Platform.OS === 'ios'?'modal':'card',
navigationOptions:{
headerStyle:{
backgroundColor:'#6699ff',
},
title:'首页',
headerTintColor:'#ffffff',
headerTitleStyle:{
fontWeight:'normal',
},
},

        },
    ),
    病例:createStackNavigator(
        // RouteConfigs
        {
                screen:Case,
        },
        // StackNavigatorConfig
        {
            headerMode:'screen',
            mode:Platform.OS === 'ios'?'modal':'card',
            navigationOptions:{
                headerStyle:{
                   backgroundColor:'#6699ff',
                },
                title:'病历',
                headerTintColor:'#ffffff',
                headerTitleStyle:{
                    fontWeight:'normal',
                },
            },
        },
    ),
    宣教:createStackNavigator(
        // RouteConfigs
        {
                screen:Educate,
        },
        // StackNavigatorConfig
        {
            headerMode:'screen',
            mode:Platform.OS === 'ios'?'modal':'card',
            navigationOptions:{
                headerStyle:{
                   backgroundColor:'#6699ff',
                },
                title:'宣教',
                headerTintColor:'#ffffff',
                headerTitleStyle:{
                    fontWeight:'normal',
                },
                tabBarIcon: ({tintColor}) => (<Icon name='educate_select'/>),

            },
        },
    ),
    我的:createStackNavigator(
        // RouteConfigs
        {
                screen:Mine,
        },
        // StackNavigatorConfig
        {
            headerMode:'screen',
            mode:Platform.OS === 'ios'?'modal':'card',
            navigationOptions:{
                headerStyle:{
                   backgroundColor:'#6699ff',
                },
                title:'我的',
                headerTintColor:'#ffffff',
                headerTitleStyle:{
                    fontWeight:'normal',
                },
            },
        },
    ),
},
// BottomTabNavigatorConfig
{
    backBehavior:'none',
    tabBarOptions:{
        activeTintColor:'#5599ff',
        style:{
            backgroundColor:'#f8f8f8'
        },
        indicatorStyle:{
            opacity:0
        },
        tabStyle:{
            padding:0
        },
        labelStyle:{
            fontSize:12,
        },
        
    },
    navigationOptions: ({ navigation }) => ({
        tabBarIcon: ({ focused, tintColor }) => {
          const { routeName } = navigation.state;
          if (routeName === '首页') {
              if(focused){
                return <Image source={ require('../Images/TabBar/tabBar_home_click_icon.png')} />;
              } else {
                return <Image source={ require('../Images/TabBar/tabBar_home_icon.png')}/>;
              }
          } else if(routeName === '病例') {
              if(focused){
                return <Image source={ require('../Images/TabBar/tabBar_casehistory_click_icon.png')}/>;
              } else {
                return <Image source={ require('../Images/TabBar/tabBar_casehistory_icon.png')}/>;
              }
            
          } else if(routeName === '宣教'){
              if(focused){
                return <Image source={ require('../Images/TabBar/tabBar_educat_click_icon.png')}/>;
              } else{
                return <Image source={ require('../Images/TabBar/tabBar_educat_icon.png')}/>;
              }
            
          } else {
              if(focused){
                return <Image source={ require('../Images/TabBar/tabBar_me_icon_click.png')}/>;
              } else {
                return <Image source={ require('../Images/TabBar/tabBar_me_icon.png')}/>;
              }
            
          }
        },
      }),

}

);

module.exports = Main;