Question

我想在启动画面中动态设置initialRouteName的{{1}}。在启动时，我根据api结果决定TabNavigator，但我不知道如何将此路由名称传递给我的路由器文件。

Router.tsx：

initialRouteName

splash.tsx：

public static Routes = StackNavigator({
    Splash: { screen: Splash },
    Verification: { screen: Verification },
    Login: { screen: Login },
    Main: {
        screen: TabNavigator({
            Calendar: { screen: Calendar },
            PendingReserves: { screen: PendingReserves },
            Profile: { screen: Profile },
        }, 
        {initialRouteName: 'Calendar'}) // I want to set it from splash
    }        
}, {initialRouteName: 'Splash'} );

我尝试静态路由到PendingReserves并在其构造函数中，检查api并在必要时更改选项卡，但我无法使用此代码以编程方式更改选项卡：

pendingReserves.tsx：

constructor(props: SplashScreenProps, context: any) {
    super(props, context);
    this.state = {
        Error: false
    }
    this.check()
}

check = async () => {
    let pending = await dataService.getPendingReserves(data);
    if (pending.Success) {                
        if (pending.result.length > 0) {
            // go to pendingReserve Tab
        } else {
            // go to Calendar Tab
        }
    } else {
        this.setState({ Error: true })
    }
}

因此，以编程方式动态设置fetchData = async () => { let res = await Utilities.getPendingReserves() if (res && res.length > 0) { ... } else { const resetAction = NavigationActions.reset({ index: 0, actions: [NavigationActions.navigate({ routeName: 'Calendar' })] }) this.props.navigation.dispatch(resetAction) // this.props.navigation.navigate({ routeName: 'Calendar' }) // both reset and simple navigate are not works correctly... } }或更改选项卡的任何解决方案都将对我有所帮助。感谢

我正在使用：

initialRouteName

Answer 1

最后......我在react navigation版本1中找不到以编程方式更改标签的方法，因此我更新到版本2并且this.props.navigation.navigate('Calendar')正常工作。

在React Navigation TabNavigator中动态设置initialRouteName

1 个答案: