Question

我正在使用Android的React Native 0.29。对于我的应用程序的特定视图/活动/屏幕，我想为BackAndroid按钮添加一个事件监听器，它可以与react native一起使用。我已经在我的应用程序中添加了一个全局BackAndroid事件监听器（在我的index.android.js文件中），如果它不是主屏幕，它会从堆栈中弹出任何视图。

使用componentDidMount()生命周期方法激活事件侦听器并且它可以正常工作。它覆盖全局的并按预期工作。现在的问题是，当componentWillUnmount()生命周期方法被触发时，它不会被删除。因此，当从特定屏幕返回时，事件监听器仍然存在并导致故障。这是我做的：

componentDidMount() {
  BackAndroid.addEventListener('backBtnPressed', this._handleBackBtnPress.bind(this))
}

componentWillUnmount() {
  BackAndroid.removeEventListener('backBtnPressed', this._handleBackBtnPress.bind(this))
}

我不明白为什么它不起作用。请帮助我理解为什么它不起作用，我该怎么做才能解决这个问题。

Answer 1

我花了好几个小时来解决这个问题。如果我分享这个，我认为这对其他开发者有帮助。

这里的主要问题是.bind(this)语句，bind总是返回一个新函数。因此，在此代码中，this._handleBackBtnPress.bind(this)和addEventListener中的removeEventListener功能不同。它们是指代不同的第一类对象的不同功能。这就是removeEventListener没有删除监听器的原因。

要解决此问题，我们可以将以下语句添加到构造函数方法 - this._handleBackBtnPress = this._handleBackBtnPress.bind(this)并从.bind(this)和addEventListener中删除removeEventListener。所以我们的代码看起来像这样：

constructor(props) {
  super(props)
  this._handleBackBtnPress = this._handleBackBtnPress.bind(this)
}

componentDidMount() {
  BackAndroid.addEventListener('backBtnPressed', this._handleBackBtnPress)
}

componentWillUnmount() {
  BackAndroid.removeEventListener('backBtnPressed', this._handleBackBtnPress)
}

现在他们都将引用相同的功能，并将按预期工作。

BackAndroid无法卸载 - React Native（Android）

1 个答案: