ReactNative学习实例（十）接管Back键BackAndroid&&ToastAndroid

本文介绍如何在React Native中实现双击退出应用及在特定页面上的退出操作。通过为BackAndroid设置监听器并与主组件的生命周期绑定，实现自定义的退出逻辑。此外，还介绍了如何利用navigator组件获取当前页面栈并据此执行不同的操作。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

转自东方耀的学习视频

下面的这个例子实现了双击退出和类似于引导页的在第二页退出。

首先为BackAndroid设置监听器：

componentWillMount() {
        BackAndroid.addEventListener('listener',this.onBackPressed);
    }

    componentWillUnMount() {
        BackAndroid.removeEventListener('listener',this.onBackPressed);
    }

与主组件的生命周期绑定起来，第一个参数唯一标识一个监听器，第二个是自定义的监听方法

监听方法：

onBackPressed=()=>{
        navigator=this.refs.navigator;
        routes=navigator.getCurrentRoutes();
        if(routes.length>2){
            navigator.pop();
            return true;
        } else{
            //到了主页了
            if (this.lastBackPressed && this.lastBackPressed + 2000 >= Date.now()) {
                //最近2秒内按过back键，可以退出应用。
                return false;
            }
            this.lastBackPressed = Date.now();
            ToastAndroid.show('再按一次退出应用', ToastAndroid.SHORT);
            return true;
        }
    }

我们知道，Back键主要管理页面栈的出栈操作，所以肯定要和navigator联系起来。这里要获取主组件的navigator实例，使用的方法是为navagator添加一个ref属性，值是一个唯一指定的字符串id：

<Navigator style={{flex:1}}
                    initialRoute={{component:FirstPage}}
                    configureScene={this.configureScene}
                    renderScene={this.renderScene}
                    ref="navigator">
                </Navigator>

然后在使用的时候通过this.refs.navigator就可以了。

首先了解下返回值的含义，返回true说明接管点击操作，不需要系统进一步操作。返回false则由系统接管，直接退出应用。
获取到navigator后，再通过getCurrentRoutes获取当前的页面栈。然后通过length对栈中的组件数进行判断，这里判断在组件有两个以上时执行正常的出栈操作，在两个的时候（也就是引导页的下一页，一般是主页面）设置一个两秒的两个点击间隔判断，也就是双击退出。这里还用到了ToastAndroid，用法和安卓非常类似，比较简单。