React Native 适配Android物理返回键，实现连续两次点击退出

Z时代
2024-01-10
分类：综合

react

一直使用iPhone作为测试机开发,提交给测试同事Android版本后发现很多适配问题,其中一个非常明显的是,弹出一个modal后,点击Android的返回键,modal不会消失,直接navigation goBack了
在Android端需要处理物理按键事件 , 另外可以实现连续两次点击退出APP的功能

 componentDidMount(): void {
      　//挂载完,添加返回按键的监听
        BackHandler.addEventListener('hardwareBackPress', this.handleBackPress);
    }
    componentWillUnmount(): void {
        //页面销毁时取消监听,防止内存泄漏
        BackHandler.removeEventListener('hardwareBackPress', this.handleBackPress);
    }
    handleBackPress = () => {
        if (this.props.navigation.isFocused()) {
　　　　　　　//判断modal是否正在显示
　　　　　　　　if(this.state.modalVisible){
　　　　　　　　　　this.setState({modalVisible:false});
　　　　　　　　　　return true;
　　　　　　　　}
if (this.lastBackPressed && this.lastBackPressed + 2000 >= Date.now()) {
                //最近2秒内按过back键，表示用户想退出应用。
                BackHandler.exitApp();
                return true;
            }
            this.lastBackPressed = Date.now();
            ToastAndroid.show('再按一次退出应用', ToastAndroid.SHORT); //提示再次按返回触发
            return true;
        }
    };