时间戳

首页 > 解决方案 > React Native - 向堆栈导航添加逻辑

react-native - React Native - 向堆栈导航添加逻辑

问题描述

我有以下堆栈导航：

const WelcomeStack = createStackNavigator({
    UpdateProfileScreen: {
        screen: UpdateProfileScreen,
    },
    SelectProfileScreen: {
        screen: SelectProfileScreen,
    },
    PresentationModal: {
        screen: PresentationModal,
    }
}, {
    initialRouteName: 'UpdateProfileScreen',
    headerMode: 'none'
})

当用户是新用户时，我首先显示“UpdateProfileScreen”，然后转到“SelectProfileSecreen”，然后是“PresentationModal”。

如果在“UpdateProfileScreen”用户关闭应用程序后出于某种原因，下次他们登录时，我将显示“SelectProfileSecreen”和“PresentationModal”。如果他们完成数据，下一次，他们将只看到“PresentationModal”

由于我已将“UpdateProfileScreen”设置为 initialRoute，因此它将始终首先加载，即使它没有显示。

所以我想知道是否可以通过编程方式更改 initialRoute 和/或是否可以：

this.props.navigation.navigate("WelcomeStack")

我可以在同一个堆栈中添加一些逻辑来处理要显示的页面吗？

标签： react-nativereact-navigation

解决方案

我在这里遇到了类似的问题，我是如何解决的：SwitchNavigator像这样添加：


let Navigation = createSwitchNavigator(
  {
    AuthLoading: AuthLoading,
    LoginNavigator: LoginNavigator,
    HomeNavTab: tabNavigator,
    LoggedInChose: LoggedInChose
  },
  {
    initialRouteName: "AuthLoading"
  }
);

堆栈是第AuthLoading一个加载并决定应用程序下一步去哪里的：

import React from "react";
import { connect } from "react-redux";

class AuthLoading extends React.Component {
  constructor(props) {
    super(props);
    this.checkUserSession();
  }


  checkUserSession = () => {
    const userData = this.props.userData;

    if (userData) {
      const residencesNumber = userData.nbreResidences;
      if (residencesNumber == 1) {
        this.props.navigation.navigate("HomeNavTab");
      } else {
        this.props.navigation.navigate("LoggedInChose");
      }
    } else {
      this.props.navigation.navigate("LoginNavigator");
    }
  };

  // Render any loading content that you like here
  render() {
    return (
      null
    );
  }
}

const mapStateToProps = state => {
  return {
    userData: state.userData
  };
};

export default connect(mapStateToProps)(AuthLoading);

也许你会从中得到一个想法。

推荐阅读