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

}

希望這會有所幫助，否則請隨時提出任何疑問