在反应导航中从嵌套导航器重置堆栈

Question

我有一个嵌套在导航器中的导航器中的屏幕。

const AppNavigator = createSwitchNavigator({
AuthLoading,
MainNavigator,
AuthNavigator
},
{
initialRouteName: 'AuthLoading'
});

const AuthNavigator = createStackNavigator({
VerificationNavigator,
OtpVerificationStack
},
{
initialRouteName: 'VerificationNavigator',
header: null,
headerMode: 'none'
});

AppNavigator首先加载AuthNavigator，然后从VerificationNavigator（第二个屏幕）加载我使用导航道具导航到OtpVerificationStack。

const OtpVerificationStack = createSwitchNavigator({
OTPLoading,
SignupNavigator,
MainNavigator
},
{ 
initialRouteName: 'OTPLoading',
});

在OtpVerificationStack中，首先加载SignupNavigator流。

const SignupNavigator = createStackNavigator({
FirstName,
LastName,
Email
},
{
header: null,
headerMode: 'none'
});

Screen FirstName包含google登录，成功登录后我想转到MainNavigator或它的屏幕'Home'。我试过了

  const resetAction = StackActions.reset({
  index: 0,
  key: OtpVerificationStack,
  actions: [
    NavigationActions.navigate({ routeName: 'Home' })
  ]
  });
  this.props.navigation.dispatch(resetAction);

但这似乎不起作用。它什么都不做！

编辑：我尝试在asyncstorage中设置令牌，并在OTPLoadingscreen中检查令牌。所以从本质上讲，我不得不将它重置回OTPVerificationStack，我可以通过保持key：null来做，但我不知道这是否是一个很好的方法。

Answer 1

我也遇到过这种问题并通过这种方式解决了。

当您在流程中时，您可以重置stacknavigator。

栈1：

屏幕截图1

画面2

SCREEN3 ...

Flow screen1-> screen2-> screen3（现在如果要重置它将起作用）。

如果要重置stack1并导航到stack2初始屏幕，请尝试以下操作：

navigateToStack(stackName,routeName,params){
        const navigateAction = NavigationActions.navigate({
            routeName: stackName,
            action: NavigationActions.navigate({
                routeName: routeName,
                params: params,
            })
        });
        this.props.navigation.dispatch(navigateAction);
    }

你只需正确提供stackname，screen routename。它会自动回家。

this.navigateToStack(MainTab,home,{item:item}):