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上的源码，里面特殊处理的页面为滑出的抽屉
还有一些练手小东西，有兴趣的可以看一下源码
