是否可以从 createStackNavigator 导航到 createDrawerNavigator？

Question

这是如何实现的

我有一个用于启动画面和登录的堆栈导航器，它工作正常，现在我有一个抽屉导航器，它是应用程序的主要主页，现在我担心的是，这可能吗，从堆栈导航器（用户名和密码）并登陆主页（DrawerNavigator）（带有左侧菜单的主页）

我的代码看起来像这样，我知道这是一个很长的代码，但同时，我几天前才开始使用 react-native。有人认为同时使用 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'
},
});

Answer 1

对于这种情况，我建议使用SwitchNavigator，它的呈现方式非常类似于 Web 应用程序。当您从一个屏幕经过时，前一个屏幕会被卸载。只会挂载聚焦的屏幕。

如果您想将其用于标题，我将保留您当前的StackNavigator：

首先你需要导入SwitchNavigator:

import { createSwitchNavigator } from 'react-navigation';

删除const MyApp = createAppContainer(MyDrawerNavigator);并更改

const MyPrologue = createAppContainer(myStackNavigator);

到

const MyPrologue = createAppContainer(switchNavigator );

switchNavigator 在哪里：

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

然后您的login 函数可以导航：

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

您可以在 https://reactnavigation.org/docs/en/switch-navigator.html#docsNav 阅读有关 SwitchNavigator 的信息