React Navigation this.props.navigation.navigate 没有导航到下一个屏幕答案

【问题标题】：React Navigation this.props.navigation.navigate doesn't navigate to the next screenReact Navigation this.props.navigation.navigate 没有导航到下一个屏幕
【发布时间】：2018-06-03 00:20:28
【问题描述】：

我有一个像这样的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}/>
.....

错误消失了，但它没有导航到下一个屏幕。我还在学习。任何帮助将不胜感激。

【问题讨论】：

分享你的LoginOrSignup代码

标签： reactjs react-native react-navigation

【解决方案1】：

您需要将您的屏幕注册到路线。这可以是使用 react-navigation 的 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
    }
});

【讨论】：