0

我有一个使用 创建的底部选项卡栏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
});
4

1 回答 1

0

根据文档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');
  });
}

希望这可以帮助。

于 2020-01-30T12:59:23.913 回答