react-native处理复杂的后退按钮功能

Question

我想知道推荐的方式(如果有的话)在处理android平台时处理react-native中的后退按钮.

我知道我可以在每个屏幕上注册监听器,但由于导航的工作方式,在导航时没有明确的绑定或解除绑定事件监听器的流程.

到目前为止,我有两个想法.

1)我可以注册一个单一的监听器,并让处理程序根据我的redux存储做出决定.这意味着如果我有一个屏幕,我有一个弹出窗口,我想用后退按钮关闭,我必须将它暴露给商店.基本上我的应用程序中任何想要受后退按钮影响的东西都必须连接到商店.乱

2)我可以在每个屏幕上注册一个监听器.根据我之前所说的,没有可靠的生命周期钩子来处理这个,所以它必须是我的手动,即我应该总是知道什么动作将导航到新的屏幕并在导航之前取消绑定特定屏幕上的监听器.

这解决了问题的一半.当导航回屏幕时,它应该重新绑定它的监听器.除了搞乱componentWillRecieveProps和其他人之外,不知道如何做到这一点.看起来仍然很混乱.

Answer 1

react-navigation无需任何工作即可为您处理基本的后退按钮功能。

如果你想要一些自定义处理，你可以尝试react-navigation-addons库，它会给你2个事件来监听：focus所以blur你可以在这些事件发生时注册/取消注册后退按钮监听器。

这是您问题中的策略 2)，您可以使用它来代替缺少生命周期挂钩。但要小心这个库，它是一个实验，所以在使用它之前请阅读注释。它看起来像这样：

class Screen extends Component {
    handleBack = () => {
    ...
    }

    screenFocus = () => {
        // add back button listener or any other code you want to execute on screen focus
        BackHandler.addEventListener('hardwareBackPress', this.handleBack);
    }

    screenBlur = () => {
        // remove back button listener or add any other code you want to execute on screen blur
        BackHandler.removeEventListener('hardwareBackPress', this.handleBack);
    }

    componentDidMount() {
        this.props.navigation.addListener('focus', this.screenFocus);
        this.props.navigation.addListener('blur', this.screenBlur);
    }

    componentWillUnmount() {
        this.props.navigation.removeListener('focus', this.screenFocus);
        this.props.navigation.removeListener('blur', this.screenBlur);
    }
    ...
}