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

发布时间：2020-12-15 20:30:53 所属栏目：百科来源：网络整理

导读：我试着了解如何在嵌套堆栈中重置这是我的代码 const AuthStack = createStackNavigator( { Welcome,Login,Register,ConfirmationCode,},{ initialRouteName: 'Welcome',headerMode: 'none',lazy: true,transitionConfig,defaultNavigationOptions: { gestur

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

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',}
    )

    let MainStack = createSwitchNavigator(
      {
        AuthLoading,Auth: AuthStack,App: AppStack,{
        initialRouteName: 'AuthLoading',}
    )

TabStack

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,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,});
    this.props.navigation.dispatch(resetAction);

但我得到了错误

there is no route defined for AuthStack

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

解决方法

你的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,],})
  );
}

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!