iOS 11 Large title on action bar

ios

#1

Hi, I want to know how to implement the large title on the action bar that iOS 11 have.

I have found the solution (probably) on Native script-Angular on this link: Adding the new iOS 11 large title

I was able to convert it to Native script pure using this code:

var frameModule = require("ui/frame");
exports.loaded = function(args) {
    var page = args.object;

    if (page.ios) {
        var navigationBar = frameModule.topmost().ios.controller.navigationBar;
        navigationBar.prefersLargeTitles = true;
    }
};

But I can’t port it to Native script Vue. The reason is that I don’t know the equivalent to exports.loaded = function(arg).

Using Vue logic that would be like the created() or mounted() methods but I don’t know how to get the arg to assign it to page.


#2

Put your loaded function inside methods object, bind event on your Page element in the template and everything should work as expected.


#3

Hi Manojdcoder thanks for the reply!,
Efectively that was how I did it. In case anybody is wondering how this look in code is something like this:
Template:

<template>
  <Page @loaded="pageLoaded">
    <ActionBar flat="true" title="Menú" />
  </Page>
</template>

Script:

<script>
export default {
  methods: {
    pageLoaded(args) {
      let page = args.object;

      if (page.ios) {
        var frameModule = require("ui/frame");
        var navigationBar = frameModule.topmost().ios.controller.navigationBar;
        navigationBar.prefersLargeTitles = true;
      }
    }
  }
};
</script>