Undefined не является объектом (оценивает this.props.navigation.navigate) при создании навигатора

Question

Я пытаюсь сделать простую навигацию между входом в систему и регистрацией, но получаю «TypeError: undefined не является объектом, оценивающим '_this2.props.navigation.navigate'). Я действительно не понимаю, почему.

Код ниже:

SwitchNavigator. js

import React from 'react'
import { createSwitchNavigator, createAppContainer } from 'react-navigation';
import Login from '../screens/Login'
import Signup from '../screens/Signup'
import Profile from "../screens/Profile";

const SwitchNavigator = createSwitchNavigator(
  {
      Login: {
          screen: Login
      },
      Signup: {
          screen: Signup
      },
      Profile: {
          screen: Profile
      }
  },
  {
      initialRouteName: 'Login'
  }
)

export default createAppContainer(SwitchNavigator)

Вход. js

import React from 'react'
import {View, Text, StyleSheet, TouchableOpacity, TextInput, Button} from 'react-native'

class Login extends React.Component {
    state = {
        email: '',
        password: ''
    }

    render() {
        return (
            <View style={styles.container}>
                <Text style={styles.jungleText}>Jungle</Text>
                <TextInput
                    style={styles.inputBox}
                    value={this.state.email}
                    onChangeText={email => this.setState({ email })}
                    placeholder='Email'
                    autoCapitalize='none'
                />
                <TextInput
                  style={styles.inputBox}
                  value={this.state.password}
                  onChangeText={password => this.setState({ password })}
                  placeholder='Password'
                  secureTextEntry={true}
                />
                <TouchableOpacity style={styles.button}>
                    <Text style={styles.buttonText}>Login</Text>
                </TouchableOpacity>
              <Button
                title="Don't have an account yet? Sign up"
                onPress={() => this.props.navigation.navigate('Signup')}
              />
            </View>
        )
    }
}

export default Login

Большое спасибо за помощь!

Answer 1

Если вы новичок в Javascript или реагируете нативно, вы часто будете сталкиваться с этой ошибкой. Это происходит, когда вы пытаетесь получить доступ к внутреннему объекту / свойству с помощью '.' на нулевом объекте. В этом случае this.props.navigation имеет значение null и, следовательно, this.props.navigation.navigate выдаст эту ошибку.

Простое решение, экспортируйте компонент входа в систему следующим образом:

export default withNavigation(Login)

Убедитесь, что вы выполняете импорт с помощью навигации

import { withNavigation } from "react-navigation"

Объяснение: withNavigation - это просто компонент высшего порядка, обеспечивающий доступность навигационной опоры для вашего компонента входа в систему.

Answer 2

замените компоненты вашего класса на функциональные компоненты. затем передайте навигацию в качестве аргумента компоненту функции. Затем используйте перехватчик useState для обработки ваших состояний. Дай мне знать, работает ли это

Answer 3

Попробуйте, вставьте это на свою страницу навигатора и установите -> npm install response-navigation-stack @ response-native-community / masked-view

import React from "react";
import {
  createSwitchNavigator,
  createAppContainer,
  createStackNavigator,
} from "react-navigation";
import Login from "../screens/Login";
import Signup from "../screens/Signup";
import Profile from "../screens/Profile";

const LoginStack = createStackNavigator({
  Login: {
    screen: Login,
  },
});

const SignupStack = createStackNavigator({
  Login: {
    screen: Signup,
  },
});

const ProfileStack = createStackNavigator({
  Login: {
    screen: Profile,
  },
});

const SwitchNavigator = createSwitchNavigator(
  {
    Login: LoginStack,
    Signup: SignupStack,
    Profile: ProfileStack,
  },
  {
    initialRouteName: "Login",
  }
);

export default createAppContainer(SwitchNavigator);