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

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

希望这会有所帮助。