RN屏蔽Android返回键

RN屏蔽Android返回键

前言

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

导入BackHandler

导入BackHandler

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

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

定义监听到用户按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);
        }

    }