Question

这是如何实现的

我有一个用于Splashscreen和Login的堆栈导航器，它工作正常，现在我有一个抽屉导航器，它是应用程序的主目录，现在我担心的是，这是否可能，从堆栈导航器（用户名）导航和密码）并登陆到主页（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的信息

是否可以从createStackNavigator导航到createDrawerNavigator？

1 个答案: