嵌套導航器中的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

如果我理解你的設置正確，我想你想在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 ）。

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 - >屏幕

當從屏幕按下后退按鈕時，問題仍然存在。