javascript - 导航无法正常工作。反应原生
问题描述
我正在尝试在 React Native 中建模一个登录、重定向系统,当用户登录时,它会重定向到相应的仪表板。如果用户是管理员,它会重定向到管理区域,如果用户是普通用户,它会重定向到普通用户区域。
到目前为止,普通用户是唯一有效的,管理员只显示警报框而不重定向到管理区域。但用户显示警报框并正确重定向到用户区域。
我的 App.js 看起来像这样:
应用程序.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');
}
}
可能有什么我做的不对吗?
解决方案
您需要在 UserHome 之间添加 Space。
this.props.navigation.navigate('User Home');
推荐阅读
- python - pip install --upgrade 排除文件列表被覆盖
- flutter - 如何在颤动中显示动画图像
- mysql - MYSQL 截断不正确的 DOUBLE 值:乘以
- django - python django url在交换时显示旧图像
- javascript - package.json 中使用 rollup.js 的 pkg.module (.esm.js) 有什么意义
- vue.js - v-model 在 select2 中不起作用。我不知道我该如何解决。当我删除 select2 的类 v-model 时
- android - 在 Flutter 中剪辑后删除多余的部分
- java - 如何解决 MediaPlayer SeekBar onStartTrackingTouch 中的 NullPointerException
- amazon-web-services - 如何更新 aws s3 更新文件下载文件名
- python - 在列表中查找与列表不匹配的单词