reactjs - React Navigation 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");

但我总是得到这个错误：

未定义不是对象（评估“this.props.navigation.navigate”）

然后我试着像这样改变我的Authentication屏幕

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

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

标签： reactjsreact-nativereact-navigation

Answer 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
    }
});