react-navigation 3 在嵌套堆栈中重置

Posted 2023-02-16

【中文标题】react-navigation 3 在嵌套堆栈中重置

【英文标题】：react-navigation 3 reset in nested stack

【发布时间】：2019-07-12 07:12:10

【问题描述】：

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

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

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

    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 定义路由

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

【问题讨论】：

React Native navigating between Nested StackNavigator的可能重复

@JaydeepGalani 我试过这个解决方案，不工作，它显示同样的错误。

检查您的路线名称，它应该是 Auth 而不是 AuthStack 作为您的声明 :) 使用 key null 重置将起作用，因为它将重置根导航。

我做了你可以在这里看到的，同样的错误pastebin.com/hvJ7Mp7b

【参考方案1】：

您的resetAction 不成功，因为您在TabStack 上发送它（因为您在UserProfile 上调用this.props.navigation.dispatch，如果我理解正确的话）。您需要将resetAction 发送给您的MainStack。 This thread here 提出了一些可以实现这一目标的方法。而且，这是我首选的解决方案，因为我不必在导航器周围传递道具或调用多个嵌套操作。

使用以下内容创建一个navigationService.js（以保留您的***导航器作为参考）

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,
;

在您的 App.js 或您呈现 MainStack 的任何其他文件上，执行此操作以设置参考

import NavigationService from './navigationService';

...

render() 
  return (

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

  )

无论何时你想重置到AuthStack（或MainStack 中的任何其他堆栈），只需导入NavigationService 并调用

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

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

已编辑

navigationService.js 中的先前解决方案是 StackNavigator 作为 MainStack

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

【讨论】：

嘿 wicky，听起来不错！我与 mobx 一起使用，所以我在我的商店里做了，我在这里复制了我的部分代码，你可以看到 pastebin.com/KtnMAXYy 我还打印了 ref 以查看它包含什么并查看他的所有属性。但我仍然遇到同样的错误..也许我错过了什么..

嘿阿迪尔，我不熟悉 mobx。但是尝试在您的resetMainStack 函数上执行conosle.log(this.main_navigation_ref)，并检查您是否在正确的导航器上。尝试寻找导航器的路线，this image 可能会有所帮助

你可以在这里看到console.log imgur.com/a/tWhfMHA它显示了mainStack

啊，我才意识到你的MainStack 实际上是SwitchNavigator。在这种情况下，您不需要 StackActions.reset 操作。只需NavigationActions.navigate 即可。我已经更新了上面的答案

正是我需要的！！！！ stack actions.reset 到 NavigationActions 有什么区别？

【参考方案2】：

尝试将其设置为AppStack，因为无论如何它都会重定向到GeneralStack，因为您在initialRouteName 中拥有initialRouteName AppStack

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

【讨论】：

你是什么意思？我想从 tabstack 的 userProfile 重置为 authstack 的 screenA .. 怎么做？

但有问题您正试图将其重置为 GeneratStack 而不是 AuthStack

我尝试做一些重置，我问你的最后一个是实现注销..有什么想法吗？

这种情况下可以直接重置为Auth

我尝试使用此代码 pastebin.com/hvJ7Mp7b 从 tabStack 的 UserProfile 重置为 AuthStack 的 screenA。我收到相同的错误“错误：错误：没有为密钥身份验证定义路由。必须是“TabStack，...”之一。

【参考方案3】：

您可以执行以下操作，重置为authStack，

创建如下重置操作，

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

并将 AuthStack 添加到 appStack 或您从中调用上述代码的堆栈中。

例如，如果您从您的应用堆栈中调用它，则将以下行添加为您的应用堆栈中的路由

  const AppStack = createStackNavigator(
  
    TabStack,
    SearchResult,
    BusinessDetail,
    BusinessMap,
    MakeAppointment,
    TermsAndConditions,
    AuthStack <---Insert THIS
  ,

这适用于我用于注销时。

【讨论】：

我知道这种方式，但我认为这种方式不正确。因为如果我想在更复杂的堆栈中重置，所以我需要始终在同一级别的堆栈中声明它......