React Native - 使用返回处理程序时的堆栈导航

Question

我有一个带有堆栈导航器的简单应用程序。 哪个导航像

Screen A --> Screen B --> Screen C --> Screen D

我已经像这样在屏幕 B 中添加了一个后处理程序

componentDidMount() {
    BackHandler.addEventListener('hardwareBackPress', this.handleBackButtonClick);
}

componentWillUnmount() {
    BackHandler.removeEventListener('hardwareBackPress', this.handleBackButtonClick);
}

它在屏幕 B 上按预期工作。当导航到 C 或 D 时，硬件按钮不会导致分别导航回 B 或 C。 相反，它似乎触发了屏幕 B 中的 handleBackButtonClick。我怎样才能避免这种情况？

Answer 1

React Navigation 保持之前的屏幕呈现。 因此，您需要确保仅在焦点屏幕中启用后处理程序。

官方文档涵盖了它。

对于 v4： https://reactnavigation.org/docs/en/custom-android-back-button-handling.html

对于 v5： https://reactnavigation.org/docs/en/next/custom-android-back-button-handling.html

我认为在您的情况下，代码可以简化：

handleBackButtonClick = () => {
  // If this screen is not focused, don't do anything
  if (!this.props.navigation.isFocused()) {
    return false;
  }

  // Do what you're doing
}
``

Answer 2

我遇到了同样的问题，即后处理程序正在触发以前的屏幕后处理程序代码。

所以我所做的是检查任何现有的后处理程序，然后在 componentDidMount 中手动将其删除，而不是信任该组件的 componentWillUnmount..

componentDidMount(){
if (this.backHandler) // checking if backhnalder exists from previous screen
    this.backHandler.remove();//removing it
    this.backHandler = BackHandler.addEventListener('hardwareBackPress', () => { this.handleBackButton() });// adding the new backhandler

}

希望这会有所帮助，否则请随时提出任何疑问