RN屏蔽Android返回键

最新推荐文章于 2022-05-12 16:16:26 发布

公子无双

最新推荐文章于 2022-05-12 16:16:26 发布

阅读量2.1k

点赞数

分类专栏： RN踩坑之旅

本文链接：https://blog.youkuaiyun.com/gongziwushuang/article/details/87916829

版权

RN踩坑之旅专栏收录该内容

7 篇文章

订阅专栏

RN屏蔽Android返回键

前言

Android在开发过程中由于种种原因需要取消屏蔽无力Back按钮，比如界面上显示自定义Dialog，按照Android原生的处理方式，点击Back键首先是使dialog消失，但在RN中，点击Back键会默认退出或者返回上一页。

导入`BackHandler`

导入BackHandler

import {
    BackHandler,
} from 'react-native';

定义监听到用户按Back键的处理函数

 onBackAndroid() {
        
        if(this.props.navigation.state.params&&this.props.navigation.state.params.showDialog){//当dialog存在时，先消失dialog   然后返回true ，不执行系统默认操作
            this.props.navigation.setParams({
                showDialog:false
            })
            return true;
        }else{//返回false ，不执行系统默认操作
            return false;
        }
       
    }

利用`BackHandler`注册`'hardwareBackPress'`监听

利用BackHandler注册'hardwareBackPress'监听

 componentWillMount() {
        if (Platform.OS === 'android') {
            BackHandler.addEventListener('hardwareBackPress', this.onBackAndroid);
        }

    }

在`componentWillUnmount`取消监听

在componentWillUnmount取消监听，即页面取消挂载时取消监听

 componentWillUnmount() {
        if (Platform.OS === 'android') {
            BackHandler.removeEventListener('hardwareBackPress', this.onBackAndroid);
        }

    }