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

发布时间：2020-12-15 05:08:10 所属栏目：百科来源：网络整理

导读：我想知道推荐的方式(如果有的话)在处理 android平台时处理react-native中的后退按钮. 我知道我可以在每个屏幕上注册监听器,但由于导航的工作方式,在导航时没有明确的绑定或解除绑定事件监听器的流程. 到目前为止,我有两个想法. 1)我可以注册一个单一的监听器

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

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

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

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

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

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

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

如果您想要一些自定义处理,您可以尝试react-navigation-addons库,它将为您提供2个要监听的事件：焦点和模糊,这样您可以在这些事件发生时注册/取消注册back button listeners.

这是策略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);
    }
    ...
}

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!