Just create a simple component:
import { android, AndroidApplication } from 'tns-core-modules/application'
import { isAndroid } from 'tns-core-modules/platform'
// WARNING: Just works on android
export default {
props: {
prevent: {
type: Boolean,
default: false
}
},
data () {
return {
hooked: false
}
},
watch: {
prevent (newVal, oldVal) {
if (newVal === oldVal) { return }
if (newVal) {
this.setHook()
} else {
this.clearHook()
}
}
},
render () {},
mounted () {
if (this.prevent) { this.setHook() }
},
beforeDestroy () {
this.clearHook()
},
methods: {
onBackEvent (data) {
this.$emit('tap', data)
if (this.prevent) {
data.cancel = true // prevents default back button behavior
}
},
setHook () {
if (!isAndroid || this.hooked) { return }
android.on(AndroidApplication.activityBackPressedEvent, this.onBackEvent)
this.hooked = true
},
clearHook () {
if (!isAndroid || !this.hooked) { return }
android.off(AndroidApplication.activityBackPressedEvent, this.onBackEvent)
}
}
}
And use it like:
...
<android-back-button :prevent="true" @tap="onBackButton" />
...
Top comments (5)
Thanks so much for this. Resources for Nativescript-Vue are pretty sparse, so you're a real life saver.
Nice! Any idea how to implement this in iOS?
Sorry, I've no idea about iOS.
It worked for me but it disables the back button in all vue pages! What can I do to fix this?
Well, there was a bug in my code, and fixed now. i've forgotten to check
prevent
property. thank you.