[RN] React Native 再按一次退出

超、凢脫俗 2021-10-23 07:27 240阅读 0赞

实现 React Native 再按一次退出

单页面：

... 
    componentWillMount() {
        BackHandler.addEventListener('hardwareBackPress', this.onBackAndroid)
    }
    
    lastBackPressed = 0
    onBackAndroid = () => {
        if (this.lastBackPressed && this.lastBackPressed + 2000 >= Date.now()) {
            BackHandler.exitApp()
            return false
        }
        this.lastBackPressed = Date.now()
        ToastAndroid.show('再按一次退出应用', ToastAndroid.SHORT)
        return true
    }
    
    componentWillUnmount() {
        BackHandler.removeEventListener('hardwareBackPress', this.onBackAndroid)
    }
    ...

包含在导航器中：

let lastBackPressed = 0;
    const defaultStateAction = RootNav.router.getStateForAction;
    RootNav.router.getStateForAction = (action, state) => {
        if (DEVICE.android && state && action.type === NavigationActions.BACK && state.routes.length === 1) {
            if (this.lastBackPressed && this.lastBackPressed + 2000 >= Date.now()) {
                BackHandler.exitApp();
                return false;
            }
            this.lastBackPressed = Date.now();
            ToastUtil.showToast("再按一次退出应用");
            const routes = [...state.routes];
            return {
                ...state,
                ...state.routes,
                index: routes.length - 1,
            };
        } else {
            return defaultStateAction(action, state); }
    };

本博客地址： [wukong1688][]

本文原文地址：[https://www.cnblogs.com/wukong1688/p/10959609.html][https_www.cnblogs.com_wukong1688_p_10959609.html]

转载请著名出处！谢谢~~

转载于:https://www.cnblogs.com/wukong1688/p/10959609.html

[wukong1688]: https://www.cnblogs.com/wukong1688/
[https_www.cnblogs.com_wukong1688_p_10959609.html]: https://www.cnblogs.com/wukong1688/p/10959609.html

发表评论取消回复

表情：

评论列表（有 0 条评论，240人围观）

还没有评论，来说两句吧...

相关阅读

相关 React Native图片缓存组件react-native-rn-cacheimage

> 额外推荐，RN常用第三方库[https://zhuanlan.zhihu.com/p/69154149][https_zhuanlan.zhihu.com_p_691541

朴灿烈づ我的快乐病毒、/ 2022年12月17日 12:57/ 0 赞/ 239 阅读

相关【Android】按返回键再按一次退出、退出确认提示框

1.再按一次退出这个功能很好解决，我们只需要监听用户是否按了返回键，然后记录第一次时间，如果第二次时间与第一次相差小于某个值那就结束程序，否则不做处理。所以我们要重写o

Love The Way You Lie/ 2022年09月16日 14:18/ 0 赞/ 185 阅读

相关再按一下退出的实现

很早之前就看到了某些APP在退出时出现了这样一个提示再按一下退出，这个提示很好的解决了用户误触返回键而退出程序的问题，提升了用户体验，实现代码如下，供学习参考： pri

骑猪看日落/ 2022年08月08日 13:57/ 0 赞/ 160 阅读

相关 Android开发之”再按一次退出程序“的实现

现在移动客户端退出程序对话框退出越来越不流行了，都开始使用连续按两次来退出，即著名的“再按一次退出程序”模式。现在就看看怎么实现的吧。 @SuppressLint("

谁践踏了优雅/ 2021年11月26日 08:46/ 0 赞/ 162 阅读

相关 [RN] React Native 下拉放大动画

React Native 下拉放大动画经测试，无法运行 https://www.jianshu.com/p/1c960ad75020 转载于:https:/

悠悠/ 2021年10月26日 14:50/ 0 赞/ 428 阅读

相关 [RN] React Native 再按一次退出

实现 React Native 再按一次退出单页面： ... componentWillMount() { BackHandler

超、凢脫俗/ 2021年10月23日 07:27/ 0 赞/ 241 阅读

相关 rn 启动页react-native-splash-screen配置

Android版: 1、安装 yarn add react-native-splash-screen 2、导入

墨蓝/ 2021年07月24日 22:53/ 0 赞/ 490 阅读

相关 rn 底部导航栏react-native-tab-navigator

使用该导航器的组件需要将,navigation=this.props.navigation传入通过设置selectedTab的值确定初始化组件

约定不等于承诺〃/ 2021年07月24日 22:44/ 0 赞/ 603 阅读

相关 rn 拍摄/预览视频react-native-image-picker和react-native-video

1、配置react-native-image-picker const options = { title:

素颜马尾好姑娘i/ 2021年07月24日 20:31/ 0 赞/ 618 阅读

相关 rn 视频播放组件react-native-video

1、安装 yarn add react-native-video 2、导入 import Video from 'react-na

淡淡的烟草味﹌/ 2021年07月24日 18:47/ 0 赞/ 632 阅读