为什么我的 React Native Android 应用程序在关闭或按下后退按钮时会崩溃？

Question

当应用程序关闭或按下返回按钮时，我的 React Native Android 应用程序崩溃。如果应用程序使用“后退”按钮退出，应用程序似乎不会报告崩溃。

我搜索了许多类似的问题和解决方案，但没有一个对我有用。

我可以完全禁用后退按钮，但这会激怒用户无法关闭应用程序。

我尝试了“react-native-exit-app”，它显然应该在不调用崩溃通知的情况下关闭应用程序，但这不起作用。它仍然在退出时报告崩溃。

我已经尝试过 BackHandler.exitApp() 但这也会导致应用程序崩溃退出。

我正在使用 React Navigation，我可以看到后退按钮控制路线。我想这可能是导致问题的原因，所以我尝试禁用它。所以没有后退按钮控制路线。我设法禁用它，但不确定它是否正确完成。即便如此，它也无济于事，因为应用程序仍然在返回或退出时崩溃。

我也在使用 Redux。我在某处读到它可能会导致“后退”按钮出现问题。我看不出怎么做。我没有尝试过任何 Redux 修复，因为我不确定 Redux 会如何导致此问题。

我的应用中有一个计时器，每 1 分钟运行一次事件。我想知道这是否会导致问题？

当应用程序崩溃时，它不会在日志中显示任何有用的信息。它只有一行不具体。

我现在有点卡住了。我在 Play 商店中看到大量报告的崩溃。我知道这是人们按下后退按钮然后再次打开应用程序。我需要找到解决方案，但我已经尝试了一切，但没有运气。

有什么想法吗？

--- 代码

import { BackHandler, ToastAndroid } from 'react-native';

constructor(properties) {
  super(properties);

  this.handleBackButton = this.handleBackButton.bind(this);
}

componentWillMount() {
  BackHandler.addEventListener('hardwareBackPress', this.handleBackButton);
}

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

handleBackButton = () => {
  console.log('Android hardware back button pressed!');
  ToastAndroid.show('Exiting the app...', ToastAndroid.SHORT);
  BackHandler.exitApp();
  return true;
}

-- 日志

07-04 12:13:50.893 10849 10904 I ReactNativeJS: Android hardware back button pressed!
07-04 12:13:50.895 10849 10904 I ReactNativeJS: Android hardware back button pressed!
07-04 12:13:50.948 10849 10904 I ReactNativeJS: 'appState', 'background'
07-04 12:13:51.641 10849 10849 D ReactNative: ReactInstanceManager.detachViewFromInstance()   <---   this is all I see when it crashes

-- 更新

我设法让堆栈跟踪像这样工作......

cd android
./gradlew installDebug --stacktrace
cd ..
react-native log-android

看起来 Firebase 正在崩溃……

07-04 13:55:55.362 13517 13574 W ReactNativeJS: Overwriting FirebaseError base field "name" can cause unexpected behavior.
07-04 13:55:55.434 13517 13574 W ReactNativeJS: Overwriting FirebaseError base field "name" can cause unexpected behavior.
07-04 13:55:55.493 13517 13574 E ReactNativeJS: [DEFAULT]: Firebase: Firebase App named '[DEFAULT]' already exists (app/duplicate-app).
07-04 13:55:55.493 13517 13574 E ReactNativeJS: 
07-04 13:55:55.493 13517 13574 E ReactNativeJS: This error is located at:
07-04 13:55:55.493 13517 13574 E ReactNativeJS:     in Wrapper (at renderApplication.js:35)
07-04 13:55:55.493 13517 13574 E ReactNativeJS:     in RCTView (at View.js:45)
07-04 13:55:55.493 13517 13574 E ReactNativeJS:     in View (at AppContainer.js:98)
07-04 13:55:55.493 13517 13574 E ReactNativeJS:     in RCTView (at View.js:45)
07-04 13:55:55.493 13517 13574 E ReactNativeJS:     in View (at AppContainer.js:115)
07-04 13:55:55.493 13517 13574 E ReactNativeJS:     in AppContainer (at renderApplication.js:34)
07-04 13:55:55.550 13517 13574 E ReactNativeJS: [DEFAULT]: Firebase: Firebase App named '[DEFAULT]' already exists (app/duplicate-app).

--- 解决了！

检查堆栈跟踪真的很有帮助。一旦我开始工作，我发现是 Firebase 导致了问题。

我这样解决了这个问题：

if (!firebase.apps.length) {
  firebase.initializeApp({
    ...
  });
}

Answer 1

您是否在卸载组件时移除事件侦听器。大多数路由库会重新挂载视图，导致添加新的侦听器，如果发生这种情况，应用程序可能会出现故障甚至崩溃。

componentDidMount() {
    this.backHandler = BackHandler.addEventListener('hardwareBackPress', () => {
        if (!this.shouldBeAppClosed()) {
            this.yourBackButtonFunction();
            return true;
        }
        return false;
    });
}

componentWillUnmount() {
    this.backHandler.remove();
}