Question

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

屏幕A =>选项卡导航器=>屏幕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中的backhandler方法，并且流程将正常工作。

但是在另一种情况下我有问题。

我的工作流程如下。

Tab Navigator A-> Tab Navigator B->屏幕

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

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

3 个答案: