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

Question

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

屏幕A => Tab Navigator =>屏幕B.

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

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

无论如何我能在这种情况下达到预期的行为吗？

Answer 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，可以停止后退按钮传播到先前容器的级联。

Answer 2

如果我理解你的设置正确，我想你想在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 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中的反向处理程序方法并且流程将正常工作。

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

我有以下工作流程。

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

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