如何呈现反应导航而不是组件？

Question

我正在处理从 API 获取数据的验证表单。所以，我有一个名为 "isLogged".

的状态

我将其初始化为 false，然后如果身份验证有效，它就会变为 true。

所以，我正在尝试呈现一个 if-else 语句，if 条件是 "isLogged" === true 然后我应该将用户导航到仪表板页面

否则当 "isLogged" 为 false 时，我渲染整个表单组件，

但我不知道如何在没有 onPress 或渲染组件的情况下在屏幕之间导航用户，我只想调用一个函数来导航或其他东西

代码：

class Login extends Component {
  constructor(props) {
    super(props);

    this.state = {
      username: null,
      password: null,
      isLogged: false,
    }
  }

  render() {
    if (this.state.isLogged) {
        # the command which navigate the user to Dashboard page
    } else {
      return (
        # The whole component code>
      );
    }
  }
}

Answer 1

你可以使用这个：

render() {
    if (this.state.isLogged) {
        this.props.navigation.navigate("Dashboard");
    }


 return (
        # The whole component code>
      );

  }

Answer 2

检查这些类型的更好的方法是使用 React 提供的生命周期钩子，因为你尽可能地创建一个干净的渲染方法。这是 componentDidMount.

    class Login extends Component {
      constructor(props) {
        super(props);

        this.state = {
          username: null,
          password: null,
          isLogged: false,
        }
      }
     componentDidMount(){
       if (this.state.isLogged) {
            this.props.navigation.navigate("Dashboard");
        }
     }
      render() {
        return (
            # The whole component code>
         );
      }
    }

万一你发现错误，比如，可以找到未定义的导航，你将需要通过更高的组件“WithNavigation”传递它。它会将导航对象添加到您的道具。以下是使用 WithNavigation.

的代码

    import { withNavigation } from 'react-navigation';
     class Login extends Component {
      constructor(props) {
        super(props);

        this.state = {
          username: null,
          password: null,
          isLogged: false,
        }
      }
     componentDidMount(){
       if (this.state.isLogged) {
            this.props.navigation.navigate("Dashboard");
        }
     }
      render() {
        return (
            # The whole component code>
         );
      }
    }
export default withNavigation(Login);

有关生命周期挂钩的更多信息，请阅读这篇文章article

如何呈现反应导航而不是组件？

how to render a react navigate instead of a component?

reactjs

react-native

react-native-navigation