Реагирование на странное поведение кнопок навигации во вложенных навигаторах

Question

Я использую React Navigation в своем приложении, и у меня есть Tab Navigator, вложенный в Stack Navigator.Иногда в приложении стек навигации:

Экран A => Навигатор по вкладкам => Экран B.

Поэтому, когда пользователи находятся на экране B и нажимают кнопку «Назад», сначала запускается обратныйдействие в Навигаторе вкладок, и только если в Навигаторе вкладок не доступно действие goBack, оно запускает действие goBack с экрана B.

Таким образом, пользователь получает неожиданное поведение, когда он находится на экране B и перешелмежду вкладками.Пользователь продолжает нажимать кнопку «Назад» до тех пор, пока Навигатор вкладок не вернется к первой вкладке, и только затем, после повторного нажатия кнопки «Назад», он перейдет с экрана B на вкладки.

Есть ли в любом случае возможностьархивировать ожидаемое поведение в этом случае?

Answer 1

Если я правильно понимаю ваши настройки, я думаю, вы хотите установить backBehavior: 'none' на TabNavigatorConfig.Это предотвратит переходы между вкладками и историю состояний.

Например:

const MyTabNav = createBottomTabNavigator({
  ScreenOne: ScreenOne,
  ...
}, {
  backBehavior: 'none', // <-- Here
  initialRouteName: 'ScreenOne',
  tabBarOptions: {
    ...
  }
})

Если это не совсем то, что вам нужно, вы можете попробовать поиграть с другими вариантами поведения назад.Два новых поведения были добавлены в версии 3.2.0 (см. https://github.com/react-navigation/rfcs/blob/master/text/0008-back-behaviour-for-tabs.md).

Answer 2

Вы можете обработать это, используя событие BackHandler на странице TabNavigator.

componentDidMount() {
    if ("android" === Platform.OS) {
      BackHandler.addEventListener("hardwareBackPress", this.handleBackPress);
    }
  }

  componentWillUnmount() {
    if ("android" === Platform.OS) {
      BackHandler.removeEventListener(
        "hardwareBackPress",
        this.handleBackPress
      );
    }
  }
  handleBackPress = () => {
    if (this.props.navigation.isFocused()) {
      this.navigateBack();
    } else {      
      this.props.navigation.goBack(null);
    }
    return true;
  };

Когда на экране B нажата аппаратная кнопка возврата, будет вызван метод обратной обработки в Tab, и поток будет работать правильно.

Но у меня проблема в другом сценарии.

У меня следующий рабочий процесс.

Навигатор вкладок A -> Навигатор вкладок B -> Экран

Когда кнопка возвратанажата с экрана, проблема все еще сохраняется.

Answer 3

Вы правильно обрабатываете кнопку возврата?в каждом компоненте верхнего уровня контейнера необходимо обрабатывать нажатие кнопки «Назад», например:

import * as React from 'react';
import { BackHandler } from 'react-native';

export default MyComponent extends React.Component<any, any> {
  public componentDidMount() {
    BackHandler.addEventListener('hardwareBackPress', this.goBack);
  }

  public componentWillUnmount() {
    BackHandler.removeEventListener('hardwareBackPress', this.goBack);
  }

  private goBack = () => {
    this.props.navigation.goBack();
    return true;
  }
}

Возвращая значение true, вы прекращаете каскадное распространение нажатия кнопки «Назад» в предыдущие контейнеры.