Quite frequently you want to control what happens when your user hits the back button, well this is actually pretty simple to do on Android.\u00a0 I've seen this question pop up several times; so it makes good blog post fodder.<\/p>\n
You can either do this totally globally; or on a per page basis.\u00a0\u00a0 Globally, you just need to add the following code to your app.js file:<\/p>\n
\/\/ application variable should already be included in the app.js file\n\/\/ Only do this on android\nif (application.android) {\n application.android.on(application.AndroidApplication.activityBackPressedEvent, backEvent);\n}\n\n\/\/ This does the work on deciding if you want to go back\n\/\/ arg.cancel = true will cancel navigating back\nfunction backEvent(args) {\n if (dontGoBack) { args.cancel = true; }\n}<\/pre>
\nYou just need to figure out what your criteria is to handle canceling going back.<\/p>\n <\/p>\n
Individual Page Handler:<\/strong><\/h2>\nNow I personally prefer to put the handler on each page I need it on; so it is a little bit different.<\/p>\n
You need to have a pageLoaded and a pageUnloaded event.
\n
\/\/ Somewhere at the top\nvar application = require('application');\n\n\/\/ Somewhere in your page you need to register your handler\nexports.pageLoaded = function() {\n \/\/ We only want to register the event in Android\n if (application.android) {\n application.android.on(application.AndroidApplication.activityBackPressedEvent, backEvent);\n }\n};\n\n\/\/ When we navigate away from this page, we need to de-register the handler.\nexports.pageUnloaded = function() {\n \/\/ We only want to un-register the event on Android\n if (application.android) {\n application.android.off(application.AndroidApplication.activityBackPressedEvent, backEvent);\n }\n};\n\n\/\/ This does your checks to see if you want to go back\n\/\/ setting cancel=true will cancel the back \nfunction backEvent(args) {\n if (iRefuseToGoBack) { args.cancel = true; }\n}<\/pre>
\nIn your page.xml your \"Page\" declaration should look like:
\n<Page xmlns="http:\/\/schemas.nativescript.org\/tns.xsd"\n loaded="pageLoaded" unloaded="pageUnloaded"><\/pre>
\nYou might notice in the individual page view version I register and de-register the event.\u00a0 Each time the page is loaded it will register the event, if you don't de-register the event then that event handler will STILL run each time you hit the back button.\u00a0 So it is very important if you are not using a global handler, to register on load, and de-register on unload.<\/p>\n <\/p>\n
Advanced Global Technique:<\/strong><\/h2>\nThere is one other way to do this; I created this technique in my nativescript-orientation plugin and as I was finishing up this post I realized it could apply here and eliminates all the busy work of registering and de-registering handlers on each page but allows you per-page handlers.\u00a0 I'm actually going to switch my apps to this way; because now that I wrote it -- it is my favorite way.\u00a0 \ud83d\ude42<\/p>\n
In your app.js file:
\n
\nvar frame = require('ui\/frame');\nif (application.android) {\n application.android.on(application.AndroidApplication.activityBackPressedEvent, backEvent);\n}\n\nfunction backEvent(args) {\n var currentPage = frame.topmost().currentPage;\n if (currentPage && currentPage.exports && typeof currentPage.exports.backEvent === "function") {\n currentPage.exports.backEvent(args);\n } \n}<\/pre>
\nThen in any page you want to control the back Event you do:
\nexports.backEvent = function(args) {\n if (iDontReallyWantToGoBack) { args.cancel = true; }\n}<\/pre>
\nPretty simple you only need to have a single global register; and it checks to see if the current page has a back handler which it will call if it exists.<\/p>\nHave fun, and now we can all stop going back.\u00a0 \ud83d\ude00<\/p>\n","protected":false},"excerpt":{"rendered":"
Quite frequently you want to control what happens when your user hits the back button, well this is actually pretty simple to do on Android.\u00a0 I've seen this question pop up several times; so it makes good blog post fodder. You can either do this totally globally; or on a per page basis.\u00a0\u00a0 Globally, you… Continue reading NativeScript - Capturing the Back Button on Android<\/span><\/a><\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_crdt_document":"","footnotes":""},"categories":[15,39],"tags":[16,58],"class_list":["post-261","post","type-post","status-publish","format-standard","hentry","category-nativescript","category-tips","tag-nativescript","tag-tips","entry"],"_links":{"self":[{"href":"https:\/\/fluentreports.com\/blog\/index.php?rest_route=\/wp\/v2\/posts\/261","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/fluentreports.com\/blog\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/fluentreports.com\/blog\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/fluentreports.com\/blog\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/fluentreports.com\/blog\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=261"}],"version-history":[{"count":7,"href":"https:\/\/fluentreports.com\/blog\/index.php?rest_route=\/wp\/v2\/posts\/261\/revisions"}],"predecessor-version":[{"id":269,"href":"https:\/\/fluentreports.com\/blog\/index.php?rest_route=\/wp\/v2\/posts\/261\/revisions\/269"}],"wp:attachment":[{"href":"https:\/\/fluentreports.com\/blog\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=261"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/fluentreports.com\/blog\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=261"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/fluentreports.com\/blog\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=261"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}