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

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

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

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

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

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

添加监听

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);

基本完成

经过上面的处理，我们可以基本的实现对物理返回的监听，如果不是初始页面（即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上的源码，里面特殊处理的页面为滑出的抽屉

还有一些练手小东西，有兴趣的可以看一下

源码