Как отлаживать "undefined не является объектом" при навигации между экранами

Question

Я пытаюсь, когда нажимаю кнопку «Войти», чтобы перейти к экрану «Ящик», который содержит все остальные мои экраны, но я получаю следующую ошибку:

TypeError: undefined не является объектом (оценка'this.props.navigation.navigate')

Вот мой DrawerScreen:

import React, {Component} from 'react';
import { Button, View, Text, Dimensions, ImageBackground } from 'react-native';
import { createStackNavigator, createAppContainer, createDrawerNavigator, DrawerItems } from 'react-navigation'; 
import HomeScreen from './HomeScreen';
import AboutScreen from './AboutScreen';
import Count from './CountScreen';

const DrawerContent = (props) => (
    <View>
    <ImageBackground 
    source={{uri:'https://cdn.pixabay.com/photo/2017/12/13/07/15/natural-3016177_960_720.jpg'}}
    style={{}}
    imageStyle= {{opacity: 0.7}}
    >
    <View
      style={{
        //backgroundColor: '#73a2ef',
        height: 140,
        alignItems: 'center',
        justifyContent: 'center',
      }}
    >
      <Text style={{ color: 'black', fontSize: 40, fontWeight: 'bold' }}>
        Menu
      </Text>
    </View>
    </ImageBackground>
    <DrawerItems {...props} />
  </View>
)

const WIDTF = Dimensions.get('window').width;

const DrawerConfig = {
  drawerWidth: WIDTF*0.80,
  drawertType: 'back',
}

const Drawer = createDrawerNavigator ({

Home: {
  screen: HomeScreen
},
About: {
  screen: AboutScreen
},
Count: {
  screen: Count
},
},
{
drawerBackgroundColor: '#c7d1a7', 
contentComponent: DrawerContent,
contentOptions: {
activeTintColor: 'blue',
style: {
  flex: 1,
  paddingTop: 15,
}
}},
DrawerConfig
);

const AppContainer = createAppContainer(Drawer);

export default AppContainer;

А вот мой LogInScreen:

import React, {Component} from 'react';
import * as firebase from 'firebase';
import {Container, Content, Header, Form, Input, Item, Button, Label, Drawer} from 'native-base';
import {StyleSheet, Text} from 'react-native';
import AppContainer from './DrawerNavigatorNew';

const firebaseConfig = {
  apiKey: 
  authDomain:
  databaseURL:
  projectId:
  storageBucket:
};

firebase.initializeApp(firebaseConfig);

export default class LoginScreen extends React.Component {

  constructor (props) {
    super(props)

    this.state =({
      email:'',
      password:'',
    })
  }

  signUpUser = (email, password) => {
    try {

      if(this.state.password.length <6)
      {
        alert("Please enter atleast 6 characters")
        return;
      }

      firebase.auth().createUserWithEmailAndPassword(email, password)
    }

    catch (error){
      console.log(error.toString())
    }
  }

  loginUser =(email, password) => {

    try{

      firebase.auth().signInWithEmailAndPassword(email, password).then(function(user){
        console.log(user)
      })
    }

    catch (error) {
      console.log(error.toString())
    }
  }

  render() {
    const {navigate} = this.props.navigation;
    return (
      <Container style={styles.container}>
        <Form>
          <Item floatingLabel>
            <Label> Email </Label>
            <Input
              name='email'
              autoCorrect={false}
              autoCapitalize='none'
              onChangeText={(email)=> this.setState({email})} 

              />
          </Item>

          <Item floatingLabel>
            <Label> Password </Label>
            <Input
              name='password'
              secureTextEntry={true}
              autoCorrect={false}
              autoCapitalize='none'
              onChangeText={(password)=> this.setState({password})}
              />
          </Item>

          <Button style={{marginTop: 10}}
          full
          rounded
          success
          onPress = {()=> this.loginUser(this.state.email,this.state.password) || navigate(AppContainer)}
          >
            <Text> Login </Text>
          </Button>

          <Button style={{marginTop: 10}}
          full
          rounded
          primary
          onPress = {()=> this.signUpUser(this.state.email,this.state.password)}
          >
            <Text style={{color: 'white' }}> Sign Up </Text>
          </Button>
        </Form>
      </Container>
    );
  }
}

const styles = StyleSheet.create ({
  container:{
    flex: 1,
    backgroundColor: 'white',
    justifyContent: 'center',
    padding: 10
  }
}) 

ИОшибка:

Answer 1

Я неправильно прочитал код.«Navigate» - команда для перемещения экрана.«createDrawenavigator» должен открыть ящик.Можете ли вы попробовать этот код?

onPress = {()=> this.loginUser(this.state.email,this.state.password) || this.props.navigation.openDrawer();}

Измените конфигурацию Navigator, если вы хотите переместить экран.

createStackNavigator({
  A: {
    screen: AScreen,
    navigationOptions: () => ({
      title: `A`,
      headerBackTitle: 'A much too long text for back button from B to A',
      headerTruncatedBackTitle: `to A`
    }),
  },
  B: {
    screen: BScreen,
    navigationOptions: () => ({
      title: `B`,
    }),
  }
});