根据条件从选项卡导航到堆栈中的特定屏幕

Question

我有一个用createBottomTabNavigator创建的底部标签栏，当用户按下其中一个标签时，我需要导航到一个特定的堆栈（用createStackNavigator创建）。我已经可以这样做，但是现在我需要根据条件决定要首先进入该堆栈中的哪个屏幕。我知道可以设置为确保始终首先显示特定屏幕的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，您不能有一个异步事件来决定初始路线。

我会建议的，这就是我如何实现的，首先创建一个启动画面，它仅显示您的应用程序徽标，并且我相信每个应用程序都应该具有启动画面。

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

希望这会有所帮助。