react-navigation 3 在嵌套堆栈中重置 [英] react-navigation 3 reset in nested stack

问题描述

我尝试了解如何在嵌套堆栈中重置这是我的代码

Im try to understand how to reset in nested stack this my code

    const AuthStack = createStackNavigator(
      {
        Welcome,
        Login,
        Register,
        ConfirmationCode,
      },
      {
        initialRouteName: 'Welcome',
        headerMode: 'none',
        lazy: true,
        transitionConfig,
        defaultNavigationOptions: {
          gesturesEnabled: false,
        },
      }
    )

    const AppStack = createStackNavigator(
      {
        TabStack,
        SearchResult,
        BusinessDetail,
        BusinessMap,
        MakeAppointment,
        TermsAndConditions
      },
      {
        initialRouteName: 'TabStack',
        headerMode: 'none',
        lazy: true,
        transitionConfig,
        defaultNavigationOptions: {
          gesturesEnabled: false,
        },
      }
    )

    let MainStack = createSwitchNavigator(
      {
        AuthLoading,
        Auth: AuthStack,
        App: AppStack,
      },
      {
        initialRouteName: 'AuthLoading',
        headerMode: 'none',
        lazy: true,

        defaultNavigationOptions: {
          gesturesEnabled: false,
        },
      }
    )

标签堆栈

    import React from 'react';

    import { createBottomTabNavigator, createAppContainer } from 'react-navigation';
    import {
        Search,
        MyFavourites,
        MyAppointments,
        UserProfile
    } from '../screens'
    import Icon from 'react-native-vector-icons/Feather';
    import Colors from '../utils/Colors'
    let TabStack = createBottomTabNavigator(
      {
        Search,
         MyFavourites,
         MyAppointments,
         UserProfile,
      },
        initialRouteName: 'ScreenTab1',
        tabBarOptions: {
          activeTintColor: Colors.pink,
          inactiveTintColor: Colors.black,
          showLabel: false,
          style: {
            backgroundColor: 'white'
          }
        },
      }
    )
    export default createAppContainer(TabStack);

我想了解如何进行重置，例如:

I want to understand how to make reset for example:

    reset from UserProfile to TabStack (in AppStack) to AuthStack

我试着这样做

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

或者这样

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

但是我得到了错误

没有为 AuthStack 定义路由

there is no route defined for AuthStack

我在 stackoverflow 中检查了问题，但那里的答案对我不起作用，总是显示我上面写的相同错误.

I checked in issues in stackoverflow but the answers there not works for me,always show me the same error I wrote above.

推荐答案

您的 resetAction 不成功，因为您正在 TabStack 上调度它(因为您正在调用 UserProfile 上的 this.props.navigation.dispatch，如果我理解正确的话).您需要将 resetAction 分派到您的 MainStack.这里的主题 建议了一些可以实现此目的的方法.而且，这是我首选的解决方案，因为我不必在导航器周围传递道具或使用此方法调用多个嵌套操作.

Your resetAction is unsuccessful because you are dispatching it on TabStack (because you are calling this.props.navigation.dispatch on UserProfile, if I get you correctly). You need to dispatch the resetAction to your MainStack instead. This thread here suggested some ways that you can achieve this. And also, here is my preferred solution, because i don't have to pass props around navigators or calls multiple nested actions with this.

1. 使用以下内容创建一个 navigationService.js(以保留顶级导航器作为参考)

1. Create a navigationService.js with the following contents (to keep your top level navigator as a reference)

import { NavigationActions, StackActions } from 'react-navigation';

let _navigator;

function setTopLevelNavigator(navigatorRef) {
  _navigator = navigatorRef;
}

function navigateMainNavigator(routeName, params) {
  _navigator.dispatch(
    NavigationActions.navigate({
      routeName,
      params,
    }),
  );
}

// add other navigation functions that you need and export them

export default {
  setTopLevelNavigator,
  navigateMainNavigator,
};

1. 在您的 App.js 或您渲染 MainStack 的任何其他文件上，执行此操作以设置引用

1. On your App.js or any other file you render your MainStack, do this to set the reference

import NavigationService from './navigationService';

...

render() {
  return (

    ...
    <MainStack
      ref={navigatorRef => {
        NavigationService.setTopLevelNavigator(navigatorRef);
      }}
    />
    ...

  )
}

1. 无论何时您想重置为 AuthStack(或 MainStack 中的任何其他堆栈)，只需导入 NavigationService 并调用

1. And wherever when you want to reset to your AuthStack (or any other stack in your MainStack), just import NavigationService and call

NavigationService.navigateAndReset('Auth', {...yourParamsIfAny});
// 'Auth' because you named it that way in your 'MainStack'

==============================================================================

===========================================================================

之前在 navigationService.js 中的解决方案是将 StackNavigator 作为 MainStack

Previous solution, in navigationService.js, is for StackNavigator as the MainStack

function navigateAndReset(routeName, params) {
  _navigator.dispatch(
    StackActions.reset({
      index: 0,
      actions: [
        NavigationActions.navigate({
          routeName,
          params,
        }),
      ],
    })
  );
}

这篇关于react-navigation 3 在嵌套堆栈中重置的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！