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不是一个对象（评估＆＃39; this.props.navigation.navigate＆＃39;）

然后我尝试像这样更改我的Authentication屏幕

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

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

Answer 1

您需要在路线上注册您的屏幕。这可以是使用reactStackNavigator of react-navigation的一个例子。

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

反应导航this.props.navigation.navigate没有导航到下一个屏幕

1 个答案: