React Native 指定页面物理返回监听

React Native 物理返回监听

在Android机上，物理返回是一个很常用的功能，本文将讲解如何在react-native中对物理返回进行处理，分别为主页面连续两次退出程序，普通页面回到上一页，指定页面特殊处理。

一. 主页面连续两次退出程序及普通页面返回上一页

首先我们要先在页面上增加物理监听，建议在主Navigator页面增加，就是有如下空间的页面里。

   <Navigator style={styles.navigator} 
          configureScene={this.configureScene} 
          renderScene={this.renderScene} 
          initialRoute={{ id: 'Splash', }} />

添加监听

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

    handleBackButton() {
        for (let i = this.handlers.length - 1; i >= 0; i--) {
            if (this.handlers[i]()) {
                return true;
            }
        }
        const routers = this.navigator.getCurrentRoutes();
        if (routers.length > 1) {
            this.navigator.pop();
            return true;
        }
        let now = new Date().getTime();
        if (now - lastClickTime < 2500) {//2.5秒内点击后退键两次推出应用程序
            return false;//控制权交给原生
        }
        lastClickTime = now;
        ToastAndroid.show('再按一次退出一个', ToastAndroid.SHORT);
        return true;
    }

对了这里的this.handleBackButton要在页面初始化的地方bind一下

this.handleBackButton = this.handleBackButton.bind(this);

基本完成
经过上面的处理，我们可以基本的实现对物理返回的监听，如果不是初始页面（即routes里还有其他页面），则把页面弹出，回到上一页，否则在2，5秒内按两次物理返回就可以退出程序。

二. 特殊页面的返回监听

1. childContextTypes

通过添加 childContextTypes 和 getChildContext() 到 context 的提供者，React 自动向下传递数据然后在组件树中的任意组件（也就是说任意子组件，在本次中将传递一个函数）都能通过定义 contextTypes 访问 context 中的数据大概是这么个意思，建议要弄明白的可以自己查一下

2. 主页面处理

在初始化(constructor(props) )的地方创建一个数组，将用来存储那些特定页面的监听函数

 this.handlers = ([]:Array<() => boolean>);

3. 当前页面新增两个函数

用来添加及删除特殊页面的物理监听，并将它们提供给向下的组件树

    addBackButtonListener(listener) {
        this.handlers.push(listener);
    }

    removeBackButtonListener(listener) {
        this.handlers = this.handlers.filter((handler) => handler !== listener);
    }

    static childContextTypes = {
        addBackButtonListener: React.PropTypes.func,
        removeBackButtonListener: React.PropTypes.func,
    }
    getChildContext() {
        return {
            addBackButtonListener: this.addBackButtonListener,
            removeBackButtonListener: this.removeBackButtonListener,
        };
    }

4. 子组件(特殊页面)特殊处理

(1) 获取父组件的函数

static contextTypes = {
       removeBackButtonListener: React.PropTypes.func.isRequired,
       addBackButtonListener: React.PropTypes.func.isRequired, 
};

(2) 新增新的监听函数

    handleBackButton() {
        let {navigator} = this.props;
        let routers = navigator.getCurrentRoutes();
        if (routers[routers.length - 1].id === "XXXXXX") {
        //防止监听卸载不及时，在其他页面触发监听操作
            this.existAlert();
            return true;
        } else {
            return false;
        }
    }

(4)功能完成了。

三.实现的原理

通过childContextTypes，主页面将增删物理监听的函数提供给了子页面。在子页面中，如果需要特殊处理物理返回监听，可以调用该方法，把当前页面的特殊处理方法添加到主页面的监听队列中。当按下物理返回，会先查看特殊监听队列，是否有特殊处理，有的话特殊处理，没有的话，将按普通的物理返回进行处理

代码

下面是我的github上的源码，里面特殊处理的页面为滑出的抽屉
还有一些练手小东西，有兴趣的可以看一下源码