React native 是否可以从createStackNavigator导航到createDrawerNavigator？

这是如何实现的

我有一个用于Splashscreen和登录的堆栈导航器，这很好，现在我有了一个DroperNavigator，它是应用程序的主主页，现在我担心的是，这是否可能，从堆栈导航器（用户名和密码）导航并登录到主页（DroperNavigator）（主页带有左侧菜单）

我的代码看起来像这样，这是一个很长的代码，我知道，但请在同一时间，我刚刚开始反应本地几天前。有人认为同时使用createStackNavigator和createDrawerNavigator是明智的吗

import React , {Component} from 'react';
import {  Platform, View, Text, Image , StyleSheet , ActivityIndicator, Dimensions, Modal, TextInput, TouchableOpacity, Alert } from 'react-native';
import { createAppContainer } from 'react-navigation';
import { createDrawerNavigator } from 'react-navigation-drawer';
import { Header } from 'react-native-elements';
import { Left, Right, Icon } from 'native-base';
import { createStackNavigator } from 'react-navigation-stack';

class SplashScreen extends React.Component{
  componentDidMount()
  {
      setTimeout(() => {
          this.props.navigation.navigate('Login')
      }, 4000);
  }
  render(){
    return(
      <View style={styles.Logocontainer}>
      <Image
          source={{uri: 'LOGO IMAGE HERE'}}
       style={styles.logo} />

       <ActivityIndicator size="large" color="blue" style={{margin:10}}/>
      </View>
    );
  }
}

class Login extends React.Component{

  login(){
    const {username, password} = this.state;
    Alert.alert('Login Successful');
    this.props.navigation.navigate('Home');
  }

  render(){
    return(
      <View style={styles.Logocontainer}>
      <Image
  source={{uri: 'LOGO IMAGE HERE'}}
style={styles.logo} />

    <Text style={{textAlign:'left',fontSize:25,color: '#009999'}}> Sign In {"\n"}</Text>
<TextInput
 onChangeText={(username) => this.setState({ username })}
placeholder = "Username"
style={styles.input}
/>

<TextInput
 onChangeText={(password) => this.setState({ password })}
placeholder = "Password"
style={styles.input}
secureTextEntry={true} />

<TouchableOpacity style={styles.button} onPress={this.login.bind(this)}>
<Text style={styles.loginbtn}> Login </Text>
</TouchableOpacity>
</View>
    );
  }
}

class Home extends React.Component{
  static navigationOptions = {
    drawerLabel: 'Home',
    drawerIcon: ({ tintColor }) => (
      <Image
        source={{uri:'http://imageholder.freeasphost.net/home.png'}}
        style={[styles.icon, { tintColor: tintColor }]}
      />
    ),
  };

  render()
  {
    return(
      <View style={styles.container}>
       <Header
          leftComponent={<Icon name="menu" onPress={() => this.props.navigation.openDrawer()} />}
        />
        <View style={styles.text}>
        <Text> Welcome to Home screen</Text>
        </View>
      </View>
    );
  }
}

class Profile extends React.Component{
  static navigationOptions = {
    drawerLabel: 'Profile',
    drawerIcon: ({ tintColor }) => (
      <Image
        source={{uri:'http://imageholder.freeasphost.net/profile.png'}}
        style={[styles.icon, { tintColor: tintColor }]}
      />
    ),
  };
  render()
  {
    return(
      <View style={styles.container}>
         <Header
          leftComponent={<Icon name="menu" onPress={() => this.props.navigation.openDrawer()} />}
        />
        <View style={styles.text}>
        <Text>Welcome to Profile screen</Text>
        </View>
      </View>
    );
  }
}

class Settings extends React.Component{
  static navigationOptions = {
    drawerLabel: 'Settings',
    drawerIcon: ({ tintColor }) => (
      <Image
        source={{uri:'http://imageholder.freeasphost.net/settings.png'}}
        style={[styles.icon, { tintColor: tintColor }]}
      />
    ),
  };
  render()
  {
    return(
      <View style={styles.container}>
        <Header
          leftComponent={<Icon name="menu" onPress={() => this.props.navigation.openDrawer()} />}
        />
        <View style={styles.text}>
        <Text>Welcome to Settings Screen</Text>
        </View>
      </View>
    );
  }
}

const myStackNavigator = createStackNavigator({
  SplashScreen:{
    screen:SplashScreen
  },
  Login:{
    screen:Login
  },
});

const MyDrawerNavigator = createDrawerNavigator({
  Home:{
    screen:Home
  },
  Settings:{
    screen:Settings
  },
  Profile:{
    screen:Profile
  },
});

const MyApp = createAppContainer(MyDrawerNavigator);
const MyPrologue = createAppContainer(myStackNavigator);

export default class App extends Component {

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

const styles = StyleSheet.create({
  icon: {
    width: 24,
    height: 24,
  },
  container: {
    flex: 1
},
text:{
  flex: 1, 
  alignItems: 'center', 
  justifyContent: 'center'
},
Logocontainer:{
  flex: 1,
  justifyContent :"center",
  alignItems:"center"
},
logo:{
  width:150,
  height:150
},
button:{
  width:300,
  padding:10,
  backgroundColor:'#009999',
  alignItems: 'center'
},

input: {
  width: 300,
  height: 44,
  padding: 10,
  borderWidth: 1,
  borderColor: '#009999',
  marginBottom: 10,
},

loginbtn:{
  color:'#ffff'
},
});

import React，{Component}来自'React'；
从“react native”导入{平台、视图、文本、图像、样式表、ActivityIndicator、维度、模态、TextInput、TouchableOpacity、Alert}；
从“react navigation”导入{createAppContainer}；
从“react navigation drawer”导入{createDrawerNavigator}；
从“react native elements”导入{Header}；
从“本机基”导入{左、右、图标}；
从“反应导航堆栈”导入{createStackNavigator}；
类SplashScreen扩展了React.Component{
componentDidMount（）
{
设置超时（（）=>{
this.props.navigation.navigate（'Login'））
}, 4000);
}
render（）{
返回(
);
}
}
类登录扩展了React.Component{
登录（）{
const{username，password}=this.state；
Alert.Alert（'Login Successful'）；
this.props.navigation.navigate（'Home'）；
}
render（）{
返回(
登录{“\n”}
this.setState（{username}）}
占位符=“用户名”
style={style.input}
/>
this.setState（{password}）}
占位符=“密码”
style={style.input}
secureTextEntry={true}/>
登录
);
}
}
类Home扩展了React.Component{
静态导航选项={
抽屉标签：“家”，
抽屉图标：（{tintColor}）=>(
),
};
render（）
{
返回(
}
/>
欢迎来到主屏幕
);
}
}
类概要文件扩展了React.Component{
静态导航选项={
抽屉标签：“配置文件”，
抽屉图标：（{tintColor}）=>(
),
};
render（）
{
返回(
}
/>
欢迎来到个人资料屏幕
);
}
}
类设置扩展了React.Component{
静态导航选项={
抽屉标签：“设置”，
抽屉图标：（{tintColor}）=>(
),
};
render（）
{
返回(
}
/>
欢迎来到设置屏幕
);
}
}
const myStackNavigator=createStackNavigator({
溅屏：{
屏幕：飞溅屏幕
},
登录：{
屏幕：登录
},
});
const MyDrawerNavigator=createDrawerNavigator({
主页：{
屏幕：主页
},
设置：{
屏幕：设置
},
简介：{
屏幕：配置文件
},
});
const MyApp=createAppContainer（myDrainerNavigator）；
const MyPrologue=createAppContainer（myStackNavigator）；
导出默认类应用程序扩展组件{
render（）{
返回(
);
}
}
const styles=StyleSheet.create({
图标：{
宽度：24，
身高：24，
},
容器：{
弹性：1
},
正文：{
弹性：1，
对齐项目：“居中”，
为内容辩护：“中心”
},
标识容器：{
弹性：1，
辩护内容：“中心”，
对齐项目：“中心”
},
标志：{
宽度：150，
身高：150
},
按钮：{
宽度：300，
填充：10，
背景颜色：'#009999'，
对齐项目：“中心”
},
输入：{
宽度：300，
身高：44，
填充：10，
边框宽度：1，
边框颜色：'#009999'，
marginBottom:10，
},
登录名：{
颜色：“#ffff”
},
});

在这种情况下，我建议使用

SwitchNavigator

，它的呈现方式非常类似于web应用程序。当您从一个屏幕经过时，将卸载上一个屏幕。仅安装聚焦屏幕

如果您想将当前的

StackNavigator

用作标题，我将保留它：

首先，您需要导入

SwitchNavigator

：

import { createSwitchNavigator } from 'react-navigation';

移除

const MyApp=createAppContainer（MyDrainerNavigator）和更改

const MyPrologue = createAppContainer(myStackNavigator);

到

其中
switchNavigator
是：

const switchNavigator = createSwitchNavigator({
    Authentication: {
       screen:myStackNavigator
    },
    DrawerNavigator: {
       screen: MyDrawerNavigator 
    },
 },
 {
    initialRouteName: "Authentication"
 })

然后您的
登录
功能可以导航执行以下操作：

this.props.navigation.navigate("DrawerNavigator")

您可以通过以下网址阅读有关SwitchNavigator的信息：
谢谢您，先生。Works 100%createSwitchNavigation是一个不错的选择！
this.props.navigation.navigate("DrawerNavigator")