Перейдите к определенному экрану в стеке от вкладки в зависимости от условия

Question

У меня есть нижняя панель вкладок, созданная с помощью createBottomTabNavigator, и когда пользователь нажимает на одну из вкладок, мне нужно перейти к определенной стопке (созданной с помощью createStackNavigator). Я уже могу это сделать, но теперь мне нужно решить, какой экран в этом стеке сначала go, в зависимости от условия. Я знаю о свойстве initialRouteName, которое можно установить для обеспечения того, чтобы определенный экран всегда отображался первым, поэтому, может быть, я смогу это использовать?

В основном я хочу, чтобы пользователь впервые просматривал учебник при нажатии на вкладку, и фактический экран со второго раза.

Вот что у меня сейчас (не работает):

const shouldGoToTutorial = async () => {
  await AsyncStorage.getItem('hasSeenTutorial').then((hasSeenTutorial) => {
    return hasSeenTutorial ? 'Screen1' : 'Tutorial';
  });
}

const OtherStack = createStackNavigator({
  Tutorial: TutorialScreen,
  Other: OtherScreen
}, {
  initialRouteName: shouldGoToTutorial
});

Answer 1

Согласно документам rn-docs вы не можете иметь асинхронное событие для определения начального маршрута.

То, что я хотел бы предложить, и вот как я реализовал это сначала создать заставку, и это просто отображает ваше приложение lo go, и я считаю, что каждое приложение должно иметь заставку.

const OtherStack = createStackNavigator({
  Tutorial: TutorialScreen,
  Other: OtherScreen,
SplashScreen:SplashScreen
}, {
  initialRouteName: SplashScreen
});

В этом заставке внутри component DidMount вы можете сделать:

componentDidMount(){
this.shouldGoToTutorial();
}


const shouldGoToTutorial = async () => {
  await AsyncStorage.getItem('hasSeenTutorial').then((hasSeenTutorial) => {
    return hasSeenTutorial ? this.props.navigation.navigate('Screen1') : this.props.navigation.navigate('Tutorial');
  });
}

Надеюсь, это поможет.