react native 安卓Back键的处理

来源:互联网 发布:java 函数 编辑:程序博客网 时间:2024/06/08 05:15

根据文档,安卓back键的处理主要就是一个事件监听:


class App extends React.Component {  componentWillMount() {    if (Platform.OS === 'android') {      BackAndroid.addEventListener('hardwareBackPress', this.onBackAndroid);    }  }  componentWillUnmount() {    if (Platform.OS === 'android') {      BackAndroid.removeEventListener('hardwareBackPress', this.onBackAndroid);    }  }  onBackAndroid = () => {    const nav = this.navigator;    const routers = nav.getCurrentRoutes();    if (routers.length > 1) {      nav.pop();      return true;    }    return false;  };  ……}

例子:“再按一次退出应用”

常有这种需求:按下back键以后,弹出一个toast,然后在一定时间内再按一次,才退出应用。这个代码就可以这样写:

onBackAndroid = () => {    if (this.lastBackPressed && this.lastBackPressed + 2000 >= Date.now()) {      //最近2秒内按过back键,可以退出应用。      return false;    }    this.lastBackPressed = Date.now();    ToastAndroid.show('再按一次退出应用');    return true;  };

还有一种情况,我们在监听函数中不能决定是否要调用默认行为,要等待一个异步操作之后才调用默认行为,此时可以通过第二种办法:

使用BACKANDROID.EXITAPP()来退出应用。

例子:在退出应用之前保存数据

写法1:

onBackAndroid = () =>{    saveData().then(()=>{      BackAndroid.exitApp();    });    return true;  }

在监听函数中,我们开始异步事件,并直接return true。此时默认行为不会被调用。当保存完毕后,我们调用exitApp(),触发默认行为,退出应用。

写法2:

onBackAndroid = async () =>{    await saveData();    BackAndroid.exitApp();  }
这里我们用了async函数,async 函数总是返回一个Promise,Promise作为一个对象,也被认为是一个“真值”,所以这种情况下默认行为总是不会被调用。当保存完毕后,我们调用exitApp(),触发默认行为,退出应用。

根据当前界面决定作何动作

有时候我们有这样的需求:当用户处于某些界面下时,back键要做特殊的动作,如:提示用户是否要保存数据,或者解锁界面禁止back键返回等等。此时,最佳实践是在route或route中对应的Component上保存关于如何处理back键的信息:

onBackAndroid = () => {    const nav = this.navigator;    const routers = nav.getCurrentRoutes();    if (routers.length > 1) {      const top = routers[routers.length - 1];      if (top.ignoreBack || top.component.ignoreBack){        // 路由或组件上决定这个界面忽略back键        return true;      }      const handleBack = top.handleBack || top.component.handleBack;      if (handleBack) {        // 路由或组件上决定这个界面自行处理back键        return handleBack();      }      // 默认行为: 退出当前界面。      nav.pop();      return true;    }    return false;  };