SwitchNavigator内TabNavigator内的DrawerNavigator反应本机

Question

我遇到这个奇怪的问题，在SwitchNavigator的TabNavigator内，抽屉导航器未显示（仅显示阴影）。 我已经尝试了一切。.什么都行不通。

index.js

import { AppRegistry } from 'react-native';
import { SwitchNavigator } from 'react-navigation'

import Login from './screens/Login';
import TabNavigator from './screens/TabNavigator';
const PublicApp = SwitchNavigator({
    Login,
    TabNavigator,
}, {
    initialRouteName: 'Login'
})
AppRegistry.registerComponent('comedyapp', () => PublicApp);

Login.js

import React from 'react';
import { View, StyleSheet, TextInput, StatusBar } from 'react-native';
import { Text, Button, Icon } from 'native-base';
import firebase from 'firebase';

export default class Login extends React.Component {

  state = { email: '', password: '', errorMessage: null }

  render() {
    return (
      <View style={{
        flex: 1,
        flexDirection: 'column',
        justifyContent: 'center',
        alignItems: 'center',
        backgroundColor:'rgb(192, 57, 43)',
      }}>
      <StatusBar backgroundColor="rgb(192, 57, 43)" />
        <Icon name="ios-person" style={{marginBottom: 20, borderRadius:5, textAlign:'center', fontSize:50, color:'white', backgroundColor:'rgb(231, 76, 60)', width:50, height:50}}/>
        <TextInput underlineColorAndroid="transparent" style={{width:'95%', height: 55, backgroundColor:'white', borderTopRightRadius:5, borderTopLeftRadius:5,
         borderBottomColor:'black', borderBottomWidth:0.5, paddingLeft:10}} placeholder='Email address' onChangeText={email => this.setState({ email })}/>
        <TextInput secureTextEntry underlineColorAndroid="transparent" style={{width:'95%', height: 55, backgroundColor:'white', 
        borderBottomLeftRadius:5, borderBottomRightRadius:5, paddingLeft:10}} placeholder='Password' onChangeText={password => this.setState({ password })}/>
        <Button full style={{marginLeft:10, marginRight:10, height: 55, marginTop: 10, backgroundColor:'rgb(231, 76, 60)'}}
        onPress={this.handleLogin}>
          <Text>Log in</Text>
        </Button>
        <View style={{flex: 0.15}}></View>
        <Text style={{fontSize:20, color:'white', fontWeight:'bold'}} onPress={() => this.props.navigation.navigate('SignUp')}>Sign up</Text>
      </View>
    )
  }
}

TabNavigator.js

import React from 'react'
import { createMaterialTopTabNavigator, } from 'react-navigation';

import { Icon } from 'native-base';
import Main from './Main';
import Profile from './Profile';

export default class TabNavigator extends React.Component {
  render() {
    return (
      <BottomBar/>
    )
  }
}
let routeConfigs = {    
    Home: {
        screen: Main,
    },
    Profile: {
        screen: Profile,
    } 
};
let tabNavigatorConfig = {   
    navigationOptions: ({ navigation }) => ({
        tabBarIcon: ({ focused, tintColor }) => {
            const { routeName } = navigation.state;
            let iconName;
            if (routeName === 'Home') {
                iconName = `ios-home${focused ? '' : '-outline'}`;
            }
            else if (routeName === 'Profile') {
                iconName = `ios-person${focused ? '' : '-outline'}`;
            }
            return <Icon name={iconName} style={{color:tintColor}} />;
        },
    }),
    tabBarPosition: 'bottom',
    tabBarOptions: {
        style: {
            backgroundColor: 'rgb(192, 57, 43)'
        },
        indicatorStyle: {
            opacity: 0,  
        },
        activeTintColor: 'black',
        inactiveTintColor: 'white',
        showIcon : true,
        showLabel : false,
    },
    animationEnabled: true,
    swipeEnabled: true,
};
const BottomBar = createMaterialTopTabNavigator(routeConfigs, tabNavigatorConfig); 

Profile.js

import React from 'react'
import { View } from 'react-native';
import { ListItem, Container, Content, Text, Button, Icon, Left, Body, Right} from 'native-base';
import firebase from 'firebase';
import { DrawerNavigator } from 'react-navigation';

class Test extends React.Component {
  render() {
    return (
      <Container>
          <Content>
              <Icon onPress={() => this.props.navigation.openDrawer()} name="ios-menu-outline" />
          </Content>
      </Container>
    );
  }
}
class CustomDrawerContentComponent extends React.Component { 
  render() {
    return (
      <View style={{backgroundColor:'#ecf0f1', flexDirection:'column', flex:1}}>
        <ListItem icon>
          <Left>
            <Button style={{ backgroundColor: "#FF9501", margin:10}}>
              <Icon active name="ios-bookmark" />
            </Button>
          </Left>
          <Body>
            <Text>Saved</Text>
          </Body>
          <Right/>
        </ListItem>
        <View style={{flex:1}}></View>

        <ListItem icon>
          <Left>
            <Button style={{ backgroundColor: "#FF9501", margin:10}} onPress={() => { firebase.auth().signOut(); }}>
              <Icon active name="ios-exit-outline" />
            </Button>
          </Left>
          <Body>
            <Text>Logout</Text>
          </Body>
          <Right/>
        </ListItem>
      </View>
    );
  }
}
export default class Profile extends React.Component {
  render() {
    return (
      <AppDrawerNavigator/>
    );
  }
}

const AppDrawerNavigator = new DrawerNavigator(
  {
     Test: { screen: Test }
  },
  {
    drawerPosition: 'left',
    contentComponent: CustomDrawerContentComponent,
    drawerOpenRoute: 'DrawerOpen',
    drawerCloseRoute: 'DrawerClose',
    drawerToggleRoute: 'DrawerToggle'
  }
)

抽屉导航器未显示：
如果我使用来运行代码

initialRouteName: 'Login'

How to fix this error

显示的抽屉导航器：
如果我使用来运行代码

initialRouteName: 'TabNavigator' 

Working tab navigator