如何解决可能的未处理的承诺拒绝（id：0）？和如何解决无法读取未定义的属性“导航”？

Question

我要创建登录面板。但是当我提交表单时出现了问题。

//App.js    

import React, { Component } from 'react';

    enter code here

import {AsyncStorage, View, Image, TouchableOpacity } from 'react-native';

import {
  createDrawerNavigator,
  createStackNavigator,
  createAppContainer,
  createSwitchNavigator,
} from 'react-navigation';


import Screen1 from './App/Components/Screen1';
import Screen2 from './App/Components/Screen2';
import Screen3 from './App/Components/Screen3';
import Screen4 from './App/Components/Screen4';

class NavigationDrawerStructure extends Component {
  constructor(props){
        super(props);
        this.__loadData();
  }

  __loadData = async() =>{
    const {navigate} = this.props.navigation;
    const isLoggedIn = await AsyncStorage.getItem('isLoggedIn');
    if(isLoggedIn === '1'){
      this.props.navigation.navigate('Auth');
    }else{
      this.props.navigation.navigate('App');
    }
    }

  toggleDrawer = () => {    
    this.props.navigationProps.toggleDrawer();
  };


  render() {
    return (
      <View style={{ flexDirection: 'row' }}>
        <TouchableOpacity onPress={this.toggleDrawer.bind(this)}>

          <Image
            source={require('./image/drawer.png')}
            style={{ width: 30, height: 30, marginLeft: 6 }}
          />
        </TouchableOpacity>
      </View>
    );
  }
}


const FirstActivity_StackNavigator = createStackNavigator({
  First: {
    screen: Screen1,
    navigationOptions: {
      header: null,
    },
  },
});


const Screen2_StackNavigator = createStackNavigator({
  Second: {
    screen: Screen2,
    navigationOptions: ({ navigation }) => ({
      title: 'Demo Screen 2',
      headerLeft: <NavigationDrawerStructure navigationProps={navigation} />,

      headerStyle: {
        backgroundColor: '#f00',
      },
      headerTintColor: '#fff',
    }),
  },
});

const Screen3_StackNavigator = createStackNavigator({
  Third: {
    screen: Screen3,
    navigationOptions: ({ navigation }) => ({
      title: 'Demo Screen 3',
      headerLeft: <NavigationDrawerStructure navigationProps={navigation} />,
      headerStyle: {
        backgroundColor: '#f00',
      },
      headerTintColor: '#fff',
    }),
  },
});

const Screen4_StackNavigator = createStackNavigator({
  Third: {
    screen: Screen4,
    navigationOptions: ({ navigation }) => ({
      title: 'Demo Screen 4',
      headerLeft: <NavigationDrawerStructure navigationProps={navigation} />,
      headerStyle: {
        backgroundColor: '#f00',
      },
      headerTintColor: '#fff',
    }),
  },
});


const DrawerNavigatorExample = createDrawerNavigator({
  Screen1: {
    screen: FirstActivity_StackNavigator,
    navigationOptions: {
      drawerLabel: () => null,
    },
  },

  Screen2: {
    screen: Screen2_StackNavigator,
    navigationOptions: {
      drawerLabel: 'Demo Screen 2',
    },
  },

  Screen3: {
    screen: Screen3_StackNavigator,
    navigationOptions: {
      drawerLabel: 'Demo Screen 3',
    },
  },

  Screen4: {
    screen: Screen4_StackNavigator,
    navigationOptions: {
      drawerLabel: 'Demo Screen 4',
    },
  },
});

//export default createAppContainer(DrawerNavigatorExample);


export default createAppContainer(createSwitchNavigator(
    {
        AuthLoading:DrawerNavigatorExample,
        App:Screen2_StackNavigator,
        Auth:FirstActivity_StackNavigator,
    },
    {
        initialRouteName:'AuthLoading',
    }
));

    Login.js


import React from 'react';
import Icon from 'react-native-vector-icons/FontAwesome';
import { 
  AsyncStorage,
  ActivityIndicator, 
  StyleSheet, 
  Text, 
  View, 
  Image 
} from 'react-native';

import {Button, Input } from 'react-native-elements';

const user_info = {user:'admin',password:'123456'}

export default class Screen1 extends React.Component { 
  constructor(props){
      super(props);

      this.state = {
          user: '',
          password:''
      };
  }

  loginSubmit = async () => {
    const {navigate} = this.props.navigation;

    if(user_info.user === this.state.user && user_info.password === this.state.password){
      await AsyncStorage.setItem('isLoading','1')
      navigate('Screen2');
    }else{
      alert('Username or password is incorrent')
    }
  }



  render() {
    return (
        <View style={styles.container}>
            <View style={styles.loginform}>
              <Image style={styles.logo} source={require('../../image/emllogo.png')} />
              <View style={styles.formarea}>
                <Input
                onChangeText={(user)=>this.setState({user})}
                  style={styles.inputtext}
                  placeholder='Input User Name'
                  leftIcon={
                    <Icon
                      name='user'
                      size={20}
                    />
                  }
                />
              </View>

              <View style={styles.formarea}>
                <Input
                    secureTextEntry={true}
                    onChangeText={(password)=>this.setState({password})}
                    style={styles.inputtext}
                    placeholder='Password'
                    leftIcon={
                      <Icon
                        name='lock'
                        size={20}
                      />
                    }
                  />
              </View>


              <View style={styles.formarea}>
                <Button
                  buttonStyle={{
                    backgroundColor:'red'
                  }}
                  title="Login"
                  onPress={this.loginSubmit}
                />
                </View>


            </View>
        </View>
      );
  }

}

const styles = StyleSheet.create({
  container:{
    flex:1,
    backgroundColor:'#f00',
    justifyContent:'center',
    alignItems: 'center'
  },
  loginform:{
    width:'80%',
    minHeight:'50%',
    borderWidth:0.5,
    backgroundColor:'#fff',
    color:'#000',
    borderRadius:10,
    alignItems: 'center'
  },
  logo:{
    marginTop:'8%'
  },
  bordertopgray:{
    borderTopColor:'#ccc',
    borderTopWidth:0.5,
    width:'100%'
  },
  formarea:{
    width:'80%',
    height:'8%',
    marginTop:20
  }

});

Branch.getAutoInstance(this);

Answer 1

尝试如下

loginSubmit = () => {
  const { user, password } = this.state;
  const { navigate } = this.props.navigation;

  if(user_info.user === user && user_info.password === password){
    AsyncStorage.setItem('isLoading', '1')
     .then(() => navigate('Screen2'))
  } else {
    alert('Username or password is incorrent')
  }
};