Question

我在使用本机与React-native-router-flux反应时使用Backhander，但是它在所有屏幕上都在做出反应，因此我希望使其适用于特定于屏幕，但是当我尝试在onBackPress中获取当前路由名称时方法，它为我提供了路由器名称中的第一个屏幕名称。

componentDidMount() {
   BackHandler.addEventListener('hardwareBackPress', this.onBackPress);
}
componentWillUnmount() {
   BackHandler.removeEventListener('hardwareBackPress', this.onBackPress);
}
onBackPress = () => {
   alert(this.props.navigation.state.routeName)
}

Answer 1

首先-React Native中的BackHandlers是全局的，而不是特定于屏幕的。但是您可以实现自己想要的行为。

某些背景

使用BackHandler.addEventListener将事件侦听器推送到事件侦听器堆栈上，使用BackHandler.removeEventListener将指定的侦听器从堆栈中删除。当按下BackButton时，将调用堆栈中的顶级侦听器并执行代码。然后调用下一个侦听器，依此类推。 当第一个侦听器返回true 时，此操作停止。

针对您的特定问题

您应确保在所需的页面上添加事件监听器（就像在代码示例中所做的一样）
您应确保事件监听器返回true
您应该确保在卸载视图时（像您一样）删除监听器

现在，您的BackHandler应该可以在实现了它的视图中使用（将其称为view1）。但是您必须考虑所有其他观点。特别是当您将视图推到view1之上时。另外，您可以为view1实现一个“ onFocus”和“ onBlur”方法，并使用此方法代替componentDidMount和componentWillUnmount来添加和删除事件侦听器，或者必须为后推处理程序添加事件侦听器，以用于所有推到顶部的视图的观点。

希望有帮助：-）

来源：https://facebook.github.io/react-native/docs/backhandler

Answer 2

如果您希望backHandler对于特定屏幕采取不同的操作，则可以在onBackPress函数中使用Actions.currentScene：

onBackPress = () => {
       if(Actions.currentScene === 'SceneKey'){
             return true;
       }
       Actions.pop();
       return true;
    }

我正在使用Backhander在带有react-native-router-flux的react native中进行响应，但它在所有屏幕上都做出了响应，我想使其适合特定于屏幕

2 个答案: