React Native - добавление логи c в стековую навигацию

Question

У меня есть следующая Навигация по стеку:

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")

Я могу добавить несколько логик c в том же стеке, чтобы обрабатывать страницу показать

Answer 1

У меня была похожая проблема, как я ее решил: добавлено SwitchNavigator примерно так:

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

Стек AuthLoading загружается первым и решает, где приложение go будет следующим:

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

Может быть, вы поняли из этого.

Answer 2

Я думаю, что ваш лучший вариант - использовать SwitchNavigator(RouteConfigs, SwitchNavigatorConfig), вы можете просто создать его с помощью createSwitchNavigator, так как он контролирует все переключения навигаторов, используемые в основном для проверки подлинности в большинстве реагирующих нативных приложений.

С учетом сказанного, для вашего случая я считаю, что это наиболее подходящий способ достижения желаемого поведения.

Пожалуйста, будьте осторожны, если публикуете приложение, используя что-то вроде:

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

, поскольку это может быть серьезной уязвимостью безопасности

документы: https://reactnavigation.org/docs/1.x/switch-navigator/

пример закуски: https://snack.expo.io/@react-navigation / auth-flow