Сброс реакции-навигации 3 во вложенном стеке

Я пытаюсь понять, как сбросить во вложенном стеке это мой код

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

но я получил ошибку

there is no route defined for AuthStack

Я проверил проблемы в stackoverflow, но ответы там не работают для меня, всегда показывают ту же ошибку, которую я написал выше.

Возможный дубликат React Native навигация между вложенными StackNavigator

Jaydeep Galani 19.02.2019 04:31

@JaydeepGalani Я попробовал это решение, оно не работает, оно показывает ту же ошибку.

Manspof 19.02.2019 06:28

Проверьте имя вашего маршрута, оно должно быть Auth вместо AuthStack в качестве вашего объявления :) И сброс с ключом null будет работать, потому что он сбросит корневую навигацию.

tuan.tran 23.02.2019 10:07

Я сделал, как вы можете видеть здесь, та же ошибка pastebin.com/hvJ7Mp7b

Manspof 23.02.2019 17:25
Умерло ли Create-React-App?
Умерло ли Create-React-App?
В этом документальном фильме React.dev мы исследуем, мертв ли Create React App (CRA) и какое будущее ждет этот популярный фреймворк React.
Освоение React Native: Пошаговое руководство для начинающих
Освоение React Native: Пошаговое руководство для начинающих
React Native - это популярный фреймворк с открытым исходным кодом, используемый для разработки мобильных приложений. Он был разработан компанией...
В чем разница между react native и react ?
В чем разница между react native и react ?
React и React Native - два популярных фреймворка для создания пользовательских интерфейсов, но они предназначены для разных платформ. React - это...
От React к React Native: Руководство для начинающих по разработке мобильных приложений с использованием React
От React к React Native: Руководство для начинающих по разработке мобильных приложений с использованием React
Если вы уже умеете работать с React, создание мобильных приложений для iOS и Android - это новое приключение, в котором вы сможете применить свои...
Хуки React: что это такое и как их использовать
Хуки React: что это такое и как их использовать
Хуки React - это мощная функция библиотеки React, которая позволяет разработчикам использовать состояние и другие возможности React без написания...
6
4
6 124
3
Перейти к ответу Данный вопрос помечен как решенный

Ответы 3

Попробуйте установить его на AppStack, потому что в любом случае он будет перенаправлен на GeneralStack, поскольку он у вас есть как initialRouteName внутри AppStack

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

Что ты имеешь в виду? Я хочу сбросить с userProfile tabstack на screenA authstack.. как это сделать?

Manspof 21.02.2019 07:57

Но в вопросе вы пытаетесь сбросить его на GeneratStack вместо AuthStack

Ravi 21.02.2019 08:03

Я пытаюсь сделать несколько сбросов, последнее, о чем я вас прошу, это реализовать выход из системы.. есть идеи?

Manspof 21.02.2019 08:19

В этом случае вы можете напрямую сбросить его на Auth

Ravi 21.02.2019 08:25

Я попытался выполнить сброс с UserProfile tabStack на screenA AuthStack с этим кодом pastebin.com/hvJ7Mp7b . Я получаю ту же ошибку «ошибка: ошибка: для ключа Auth не определен маршрут. Должен быть один из «TabStack,...."

Manspof 21.02.2019 09:12

@ Я редактирую свой пост, указав настоящие имена, чтобы его было легче понять. проверить еще раз – Адир Зоари 9 минут назад Удалить

Manspof 21.02.2019 09:28

@RaviRupareliya, в моем случае MainNav - это StackNav. Также у меня есть внутри него switchNav, а затем StackNav внутри switchNav. В некоторых ситуациях я хочу оставить внутренний stackNav, но это не удается. кажется, что внешний стек будет сброшен, и поскольку я передаю один из внутренних StackNav routeName, он не может найти его во внешнем stackNav. У меня есть служебный файл NavigationService, как вы написали в своем ответе. у вас есть идеи, как я могу это исправить?

Saeed Zhiany 12.08.2019 17:05

Вы можете сделать следующее, чтобы сбросить на 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
  },

Это работает для меня при использовании для выхода.

Я знаю такой способ, но я не думаю, что это правильный путь ... потому что, если я хочу сбросить в более сложных стеках, мне нужно всегда объявлять его на одном уровне стека...

Manspof 22.02.2019 11:13
Ответ принят как подходящий

Ваш resetAction не работает, потому что вы отправляете его на TabStack (потому что вы звоните this.props.navigation.dispatch на UserProfile, если я вас правильно понял). Вместо этого вам нужно отправить resetAction своему MainStack. Эта тема здесь предложил несколько способов, как этого добиться. Кроме того, вот мое предпочтительное решение, потому что мне не нужно передавать реквизиты по навигаторам или вызывать несколько вложенных действий с этим.

  1. Создайте 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,
};
  1. В вашем App.js или любом другом файле, который вы визуализируете MainStack, сделайте это, чтобы установить ссылку
import NavigationService from './navigationService';

...

render() {
  return (

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

  )
}
  1. И где бы вы ни захотели сбросить свой 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,
        }),
      ],
    })
  );
}

Эй, Вики, звучит как отличный способ сделать это! Я использую с mobx, поэтому я сделал это в своем магазине, я скопировал часть своего кода здесь, вы можете увидеть pastebin.com/KtnMAXYy. Я также распечатал ссылку, чтобы увидеть, что он включает, и увидеть все его свойства. но я все еще получаю ту же ошибку.. может быть, я что-то пропустил..

Manspof 26.02.2019 08:02

Эй, Адир, я не знаком с mobx. Но попробуйте выполнить conosle.log(this.main_navigation_ref) функцию resetMainStack и проверьте, находитесь ли вы в правильном навигаторе. Попробуйте поискать маршруты навигатора, может поможет это изображение

wicky 26.02.2019 08:51

вы можете увидеть console.info здесь imgur.com/a/tWhfMHA, он показывает мне mainStack

Manspof 26.02.2019 10:35

Ааа, я только что понял, что твой MainStack на самом деле SwitchNavigator. В этом случае вам не нужно действие StackActions.reset. Подойдет только NavigationActions.navigate. Я обновил свой ответ выше

wicky 26.02.2019 10:52

именно то, что мне нужно!!!! в чем разница между действиями стека. сброс для NavigationActions?

Manspof 26.02.2019 10:56

Галд помогает. StackActions.resetindex: 0) — это сбросить стек вашего StackNavigator, так что, когда вы нажимаете на него новый экран с помощью NavigationActions.navigate, новый экран будет первым экраном в StackNavigator. Без StackActions.reset он поместит новый экран на вершину стека, и вы все равно сможете вернуться к предыдущему экрану, используя back button или swipe left. Поскольку ваш MainStack является SwitchNavigator, а не StackNavigator, вам не нужно сбрасывать стек.

wicky 26.02.2019 11:08

Давайте продолжить обсуждение в чате.

Manspof 26.02.2019 11:16

Другие вопросы по теме