ReactNative Android監聽返回鍵,在某個頁面返回鍵退出應用
阿新 • • 發佈:2018-12-18
在之前專案中,在進行返回鍵退出應用時,應用的程式碼如下:
componentWillMount() { if (Platform.OS === 'android') { BackHandler.addEventListener('hardwareBackPress', this.onBackAndroid); } }
componentWillUnmount() { if (Platform.OS === 'android') { BackHandler.removeEventListener('hardwareBackPress', this.onBackAndroid); } }
onBackAndroid = () => {
const navigator = this.refs.navigator;
const { navigator } = this.props;
const routers = navigator.getCurrentRoutes();
console.log('當前路由長度:'+routers.length);
if (routers.length > 1) {
navigator.pop();
return true;//接管預設行為
}
return false;//預設行為
};
可是在後面的專案中,用的是 react-navigation 這個元件,這個元件中沒有getCurrentRoutes()這個方法了,所以沒辦法用上面的程式碼了。如果我們現在依舊想要達到在主頁連續進行兩次返回鍵,則退出APP怎麼辦呢?如下程式碼:
componentWillMount() { if (Platform.OS === 'android') { BackHandler.addEventListener('hardwareBackPress', this.onBackAndroid); } } componentWillUnmount(){ if (Platform.OS === 'android') { BackHandler.removeEventListener('hardwareBackPress', this.onBackAndroid); } };
上面這一部分依舊不變,
onBackAndroid = () => { //禁用返回鍵 if(this.props.navigation.isFocused()){//判斷 該頁面是否處於聚焦狀態 if (this.lastBackPressed && this.lastBackPressed + 2000 >= Date.now()) { BackHandler.exitApp();//直接退出APP }else{ this.lastBackPressed = Date.now(); ToastAndroid.show('再按一次退出應用', 1000);//提示 return true; } } }
這裡,我們用到的是this.props.navigation.isFocused() 的isFocused()這個方法來判斷,改頁面是否處於聚焦狀態,如果是,則進行連續點選兩次返回鍵,退出APP。如果不是,則執行返回操作。