导航无法正常工作。反应本机

Question

我正在尝试在 React native 中为登录、重定向系统建模，当用户登录时，它会重定向到相应的仪表板。如果用户是管理员，则重定向到管理区，如果用户是普通用户，则重定向到普通用户区。

到目前为止，普通用户是唯一可用的，管理员只显示警告框，不会重定向到管理区域。但用户显示警告框并正确重定向到用户区域。

我的App.js看起来是这样的:

App.js

import React, {Component} from 'react';
import {
  Platform,
  StyleSheet,
  Text,
  View,
  Image,
  TextInput,
  TouchableOpacity,
  Alert,
  AsyncStorage
} from 'react-native';

import {createAppContainer, createSwitchNavigator} from 'react-navigation';
import {createStackNavigator} from 'react-navigation-stack';
import {createDrawerNavigator} from 'react-navigation-drawer';
import Icon from 'react-native-vector-icons/SimpleLineIcons';

import Splash from './src/Splash';
import Login from './src/Login';
import AdminShout from './src/AdminShout';
import UserHome from './src/UserHome';
import UserShout from './src/UserShout';
import AdminHomePage from './src/AdminHomePage';


const AdminHomeNavigator = createStackNavigator({
  'AdminHomePage': {
    screen: AdminHomePage,
    navigationOptions: ({navigation}) => ({
      headerLeft: () => (
        <TouchableOpacity
          style={{marginLeft: 20}}
          onPress={() => navigation.toggleDrawer()}>
          <Icon name="menu" size={12} />
        </TouchableOpacity>
      ),
    }),
  },
});

const LoginNavigator = createStackNavigator({
  'Login': {
    screen: Login,
    navigationOptions: ({navigation}) => ({
      headerLeft: () => (
        <TouchableOpacity
          style={{marginLeft: 20}}
          onPress={() => navigation.toggleDrawer()}>
          <Icon name="menu" size={12} />
        </TouchableOpacity>
      ),
    }),
  },
});

const AdminShoutNavigator = createStackNavigator({
  'Admin Shout': {
    screen: AdminShout,
    navigationOptions: ({navigation}) => ({
      headerLeft: () => (
        <TouchableOpacity
          style={{marginLeft: 20}}
          onPress={() => navigation.toggleDrawer()}>
          <Icon name="menu" size={12} />
        </TouchableOpacity>
      ),
    }),
  },
});

const UserHomeNavigator = createStackNavigator({
  'User Home': {
    screen: UserHome,
    navigationOptions: ({navigation}) => ({
      headerLeft: () => (
        <TouchableOpacity
          style={{marginLeft: 20}}
          onPress={() => navigation.toggleDrawer()}>
          <Icon name="menu" size={12} />
        </TouchableOpacity>
      ),
    }),
  },
});

const UserShoutNavigator = createStackNavigator({
  'User Shout': {
    screen: UserShout,
    navigationOptions: ({navigation}) => ({
      headerLeft: () => (
        <TouchableOpacity
          style={{marginLeft: 20}}
          onPress={() => navigation.toggleDrawer()}>
          <Icon name="menu" size={12} />
        </TouchableOpacity>
      ),
    }),
  },
});


const DrawerNavigatorAdmin = createDrawerNavigator({
  AdminHomePage: {
    navigationOptions: {
      drawerIcon: (
        <Image
          source={{uri: 'asset:/icons/home.png'}}
          style={{width: 21, height: 21}}
        />
      ),
      drawerLabel: 'Admin Home',
    },
    screen: AdminHomeNavigator,
  },

  AdminShout: {
    navigationOptions: {
      drawerIcon: (
        <Image
          source={{uri: 'asset:/icons/home.png'}}
          style={{width: 21, height: 21}}
        />
      ),
      drawerLabel: 'Admin Shout',
    },
    screen: AdminShoutNavigator,
  },
})

const DrawerNavigatorUser = createDrawerNavigator({
  UserHome: {
    navigationOptions: {
      drawerIcon: (
        <Image
          source={{uri: 'asset:/icons/home.png'}}
          style={{width: 21, height: 21}}
        />
      ),
      drawerLabel: 'User Home',
    },
    screen: UserHomeNavigator,
  },

  UserShout: {
    navigationOptions: {
      drawerIcon: (
        <Image
          source={{uri: 'asset:/icons/home.png'}}
          style={{width: 21, height: 21}}
        />
      ),
      drawerLabel: 'User Shout',
    },
    screen: UserShoutNavigator,
  },
})


const AppSwitchNavigator = createSwitchNavigator(
  {
    Splash: {screen: Splash},
    Login: {screen: Login},
    Drawer: {screen: DrawerNavigatorAdmin},
    Drawer: {screen: DrawerNavigatorUser},
  },
  {
    initialRouteName: 'Splash',
  },
);

const App = createAppContainer(AppSwitchNavigator);

export default App;

然后给出检查其是否为普通用户或管理员的代码因此：

ShowLogin = () =>{
    const {AccountNum} = this.state;
    const {passcode} = this.state;

    if(AccountNum =='admin' && passcode =='admin'){
        Alert.alert('Logged in as Admin')
        this.props.navigation.navigate('AdminHomePage');
    }
    else if(AccountNum =='user' && passcode =='user123'){
        Alert.alert('Logged in as normal User')
        this.props.navigation.navigate('UserHome');
    }
}

我是不是哪里做的不对？

Answer 1

您需要在 UserHome 之间添加Space。

this.props.navigation.navigate('User Home');

导航无法正常工作。反应本机

Navigation not working correctly. React native

javascript

react-native

react-navigation