Javascript 嵌套导航器中的“返回”按钮行为

我在我的应用程序中使用React导航，我在堆栈导航器中嵌套了一个选项卡导航器。有时在应用程序中，导航堆栈是：

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

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

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

---

在这种情况下，我是否可以归档预期的行为？

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

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;
  }
}

import*as React from'React'；
从“react native”导入{BackHandler}；
导出默认MyComponent扩展React.Component{
公共组件didmount（）{
BackHandler.addEventListener（'hardwareBackPress'，this.goBack）；
}
公共组件将卸载（）{
BackHandler.removeEventListener（'hardwareBackPress'，this.goBack）；
}
专用goBack=（）=>{
this.props.navigation.goBack（）；
返回true；
}
}

---

通过返回true，您将停止“后退”按钮传播到上一个容器的级联。

如果我正确理解您的设置，我认为您希望在

选项卡NavigatorConfig上设置
backBehavior:“无”
。这将阻止选项卡导航推送历史状态

例如：

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

const MyTabNav=createBottomTabNavigator({
第一屏：第一屏，
...
}, {
backBehavior:“无”，//您可以使用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中按下硬件后退按钮时，将调用选项卡中的backhandler方法，流程将正常工作

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

我有以下工作流程

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

当从屏幕上按“后退”按钮时，问题仍然存在。
您是否发现了这一点？我遇到了相同的问题。还没有。仍然遇到此问题使用此链接更改backBehavior属性。我不确定OPs设置，但我的设置实际上与硬件后退无关。如果使用iOS上内置的软件后退按钮位于标题中。这是React导航的问题。