嵌套导航器中的 React Navigation 奇怪的后退按钮行为答案

【问题标题】：React Navigation weird back button behavior in nested navigators嵌套导航器中的 React Navigation 奇怪的后退按钮行为
【发布时间】：2019-05-10 21:42:50
【问题描述】：

我在我的应用程序中使用 React Navigation，并且我有一个嵌套在 Stack Navigator 中的 Tab Navigator。有时在应用程序中，导航堆栈是：

屏幕 A => 选项卡导航器 => 屏幕 B。

因此，当用户在屏幕 B 中并按下后退按钮时，它首先会触发选项卡导航器中的后退操作，并且只有在选项卡导航器中没有可用的后退操作时才会触发屏幕 B 中的后退操作。

因此，当用户在屏幕 B 中并在选项卡之间导航时，他会遇到意外行为。用户一直按返回按钮，直到选项卡导航器返回到第一个选项卡，然后再按一次返回按钮后，它才会从屏幕 B 返回选项卡。

在这种情况下，无论如何我可以归档预期的行为吗？

【问题讨论】：

你有没有想过这个问题？我遇到了同样的问题。
还没有。仍然遇到这个问题
使用此链接 reactnavigation.org/docs/en/… 更改 backBehavior 属性。

标签： javascript reactjs react-native react-navigation

【解决方案1】：

您是否正确处理了后退按钮？在您需要处理后退按钮按下的每个容器顶级组件上，例如：

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，您可以停止将后退按钮按下传播到前一个容器的级联。

【讨论】：

我不确定 OP 的设置，但我的设置实际上与硬件后压无关。如果您在 iOS 上使用标题中的内置软件后退按钮，也会发生同样的事情。这是 React Navigation 的问题。

【解决方案2】：

如果我正确理解您的设置，我想您想在TabNavigatorConfig 上设置backBehavior: 'none'。这将防止标签导航推送历史状态。

例如：

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）。

【讨论】：

【解决方案3】：

您可以使用 TabNavigator 页面中的 BackHandler 事件来处理它。

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 中的 backhandler 方法，并且流程将正常工作。

但我在另一个场景中遇到了问题。

我有以下工作流程。

选项卡导航器 A -> 选项卡导航器 B -> 屏幕

当从屏幕按下返回按钮时，问题仍然存在。

【讨论】：