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

希望这会有所帮助。

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

1 个答案: