嵌套导航器中的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，您可以停止将后退按钮按下传播到先前容器的级联。