Reactjs React native：在不同屏幕中删除BackHandler

我是个新来的本地人。我有两个屏幕

屏幕A

和

屏幕B

。我在

屏幕A

中注册了BackHandler事件侦听器，并希望删除

屏幕B

上的侦听器。我该怎么做呢。 我尝试了以下代码

class ScreenA extends React.Component{
    componentDidMount() {
        BackHandler.addEventListener('hardwareBackPress', this.handleBackPress);
    }
    handleBackPress = () => {
        return true;
    }
    _navigateToB = () => {
        this.props.navigation.navigate('ScreenB')
    }
    render(){
      return <View><Botton onPress={ () => { this._navigateToB } } /></View>
    }
}

// second screen
class ScreenB extends React.Component{
    componentDidMount() {
        BackHandler.removeEventListener('hardwareBackPress', this.handleBackPress )
        //BackHandler.removeEventListener('hardwareBackPress', () =>  true )  //I tried it too
        //BackHandler.removeEventListener('hardwareBackPress', true ) //I tried it too
    }
    handleBackPress = () => {
        return true;
    }
}

类ScreenA扩展了React.Component{
componentDidMount（）{
BackHandler.addEventListener（'hardwareBackPress'，this.handleBackPress）；
}
车把靠背压力=（）=>{
返回true；
}
_导航选项卡=（）=>{
this.props.navigation.navigate（'ScreenB'）
}
render（）{
返回{this.\u navigateToB}}/>
}
}
//第二屏
类ScreenB扩展了React.Component{
componentDidMount（）{
BackHandler.removeEventListener（'hardwareBackPress'，this.handleBackPress）
//removeEventListener（'hardwareBackPress'，（）=>true）//我也试过了
//removeEventListener（'hardwareBackPress'，true）//我也试过了
}
车把靠背压力=（）=>{
返回true；
}
}

但这段代码并没有删除backHandle事件侦听器。 当我放置

BackHandler.removeEventListener（'hardwareBackPress'，this.handleBackPress）

---

在

屏幕A的
\u navigateToB
中，它工作正常。我可以在
屏幕B上删除此侦听器吗？首先，在组件B中，您不注册BackHandler，因此当您删除它时，它会报告错误

其次，当您将其放入屏幕A的_navigateToB中时，您可以将其注册到组件A componentDidMount方法中，以便删除它

您不能在其他屏幕上删除它

如果您想了解更多，我们可以查看它的源代码：

const _backPressSubscriptions = [];
addEventListener: function(
    eventName: BackPressEventName,
    handler: Function,
  ): {remove: () => void, ...} {
    if (_backPressSubscriptions.indexOf(handler) === -1) {
      _backPressSubscriptions.push(handler);
    }
    return {
      remove: (): void => BackHandler.removeEventListener(eventName, handler),
    };
  },

它将处理函数放入数组中；而且它不是全球性的。因此，您只能在同一组件中添加和删除

然后在android本机中，当它接收到hardware back事件时，它会将其发送到react本机js

// located in the DeviceEventManagerModule
/** Sends an event to the JS instance that the hardware back has been pressed. */
  public void emitHardwareBackPressed() {
    getReactApplicationContext()
        .getJSModule(RCTDeviceEventEmitter.class)
        .emit("hardwareBackPress", null);
  }

在react native BackHandler.js源代码中，我们可以使用RCTDeviceEventEmitter添加此事件

const DEVICE_BACK_EVENT = 'hardwareBackPress';
RCTDeviceEventEmitter.addListener(DEVICE_BACK_EVENT, function() {
  for (let i = _backPressSubscriptions.length - 1; i >= 0; i--) {
    if (_backPressSubscriptions[i]()) {
      return;
    }
  }

  BackHandler.exitApp();
});


因此，当我们接收到事件时，它将选择我们在
\u backpress subscriptions
之前添加的事件，当它到达末尾时，它调用
exitApp
方法。
我在
屏幕A
的
\u navigateToB
的相同方法中使用了它。工作fine@ManiKantTiwari，添加到侦听器的函数属于，因此可以在方法_navigateToB中删除它。在B中，寄存器函数为“找不到”。当一个组件卸载时，我们必须删除它。由于
\u backpress subscriptions
类似于类静态变量。