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

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

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

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

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

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

1. 添加监听

    componentWillMount() {
        if (Platform.OS === 'android') {
            BackAndroid.addEventListener('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);

1. 基本完成
   经过上面的处理，我们可以基本的实现对物理返回的监听，如果不是初始页面（即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 === "XXXXXXXX") {
            //为了保险起见 因为有时候监听不会立刻被卸载，防止在其他页面触发该监听
            this.existAlert();//特殊处理
            return true;
        } else {
            return false;
        }
    }

(3) 将函数添加到监听队列中(仍要记得bind)

componentDidMount() {  
    this.context.addBackButtonListener(this.handleBackButton);              
}
componentWillUnmount() {
    this.context.removeBackButtonListener(this.handleBackButton);        
}

(4)功能完成了。

三.实现的原理

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

代码

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