Реагируйте с навигацией this.props.navigation.navigate не переходит к следующему экрану

Question

У меня есть экран Authentication, подобный этому:

import React, { Component } from 'react';
import { connect } from 'react-redux';
import Profile from './Profile';
import LoginOrSignup from './LoginOrSignup';

class Auth extends Component {
  render() {
    if (this.props.isLoggedIn) {
        return <Profile />;
    } else {
        return <LoginOrSignup />;
    }
  }
}

const mapStateToProps = (state, ownProps) => {
   return {
      isLoggedIn: state.auth.isLoggedIn
  };
}

export default connect(mapStateToProps)(Auth);

На моем экране LoginOrSignup у меня есть кнопка submit, содержащая функцию для навигации, подобную этой:

this.props.navigation.navigate("ConfirmOTP");

Но я всегда получал эту ошибку:

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

Затем я попытался изменить свойAuthentication экран, подобный этому

.....
<LoginOrSignup navigation={this.props.navigation}/>
.....

Ошибка исчезла, но она не переходит к следующему экрану.Я еще учусь.Любая помощь будет принята с благодарностью.

Answer 1

вам нужно зарегистрировать свой скрин в маршруте.Это может быть примером использования createStackNavigator реагирующей навигации.

import ConfirmOtp from "./ConfirmOtp";
import { createStackNavigator } from "react-navigation";

class LoginOrSignup extends Component {
    render() {
        return (
            <View> 
                <Button onClick={() => this.props.navigation.navigate("ConfirmOtp")}/>
            </View>
        )
    }
}

export default createStackNavigator({
    LoginOrSignup {
        screen: LoginOrSignup
    },
    ConfirmOtp: {
        screen: ConfirmOtp
    }
});