时间戳

首页 > 解决方案 > 使用 Redux 成功登录后如何导航到 App stack？

react-native - 使用 Redux 成功登录后如何导航到 App stack？

问题描述

我有一个切换导航器

   // Add switch navigator
    export default createAppContainer(
        Config.Login.RequiredLogin
          ? createSwitchNavigator(
              {
                AuthLoading: AuthLoadingScreen, 
                App: DrawerNavigator, // App Stack
                Auth: AuthNavigator, // Auth Stack
              },
              {
                initialRouteName: "AuthLoading", 
              }
            )
          : DrawerNavigator
    );

在首次应用启动期间，它会显示“Auth”堆栈的登录屏幕。按下登录按钮后，它将通过 fetch 调用登录 API 并更新 redux 用户。当有用户时，我应该如何导航到“应用程序”堆栈？

我试图将它放在 getDerivedStateFromProps 中，但它给出了错误

TypeError: undefined is not an object (评估 'this.props.navigation')

  static getDerivedStateFromProps(nextProps, prevState) {
    if (prevState.userToken !== nextProps.userToken) {
      this.props.navigation.navigate("App");

      return {
        userToken: nextProps.userToken
      };
    }

    // Return null to indicate no change to state.
    return null;
  }

我应该在 render() 中放置一个标志并在那里导航吗？抱歉，我是本地反应新手。

  render() {
    const { userToken } = this.props
    if(userToken){
      this.props.navigation.navigate("App");
    }


    ... other code for rendering login view
  }

getDerivedStateFromProps 的主要目的是什么？

标签： react-native

解决方案

getDerivedStateFromProps 应该用于更新关于 newprops 的状态。它不应该用于重定向目的。您应该使用componentdidupdate

尝试这个

componentDidUpdate() {
  const { userToken } = this.props
    if(userToken){
      this.props.navigation.navigate("App");
    }
}

推荐阅读