javascript - Accessing element height in NativeScript - Stack Overflow

admin管理员组

文章数量:1389833

I am trying to write a native script app which retrieves the rendered height of the bottle view/element in my xml. I have tried the following code, but unfortunately, I get an error (shown below). Any guidance would be much appreciated.

JS:

var viewModule = require("ui/core/view");
var page;

exports.fabTap = function (args) {
      page = args.object;
      var bottle = page.getViewById("bottle");
      console.log("Height: " + bottle.height);
  }

XML:

<Page xmlns=".xsd" xmlns:FAB="nativescript-floatingactionbutton" actionBarHidden="true" loaded="pageLoaded">
  <GridLayout columns="*, *, *, *" rows="15*, 5*, 20*, 5*, 5*, 5*, 5*, 20*, 20*" width="100%" height="100%" style.backgroundColor="white" >
    <Image src="res://logo" row="0" col="1" colSpan="2" stretch ="aspectFit" class="logo"/>
    <Image id="bottle" src="res://bottle_outline" row="2" col="0" rowSpan="6" colSpan="2" stretch="aspectFit"/>
  </GridLayout>
</Page>

Cannot read property 'height' of undefined.

I am trying to write a native script app which retrieves the rendered height of the bottle view/element in my xml. I have tried the following code, but unfortunately, I get an error (shown below). Any guidance would be much appreciated.

JS:

var viewModule = require("ui/core/view");
var page;

exports.fabTap = function (args) {
      page = args.object;
      var bottle = page.getViewById("bottle");
      console.log("Height: " + bottle.height);
  }

XML:

<Page xmlns="http://schemas.nativescript/tns.xsd" xmlns:FAB="nativescript-floatingactionbutton" actionBarHidden="true" loaded="pageLoaded">
  <GridLayout columns="*, *, *, *" rows="15*, 5*, 20*, 5*, 5*, 5*, 5*, 20*, 20*" width="100%" height="100%" style.backgroundColor="white" >
    <Image src="res://logo" row="0" col="1" colSpan="2" stretch ="aspectFit" class="logo"/>
    <Image id="bottle" src="res://bottle_outline" row="2" col="0" rowSpan="6" colSpan="2" stretch="aspectFit"/>
  </GridLayout>
</Page>

Cannot read property 'height' of undefined.

• javascript
• xml
• nativescript

Share Improve this question Follow asked Apr 9, 2016 at 8:43 George EdwardsGeorge Edwards 9,2292121 gold badges8585 silver badges171171 bronze badges

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 4

To get the calculated size of the view, not what you declared in the styles:

const viewModule = require("ui/core/view");
let page;

exports.pageLoaded = function (args) {
   page = args.object;
}

exports.fabTap = function (args) {
   const bottle = page.getViewById("bottle");
   console.log("Height: " + bottle.getActualSize().height);
}

This is because in the fabTap handler, args.object is not the page but the FAB widget itself. So when you call getViewById it searches the view hierarchy of the FAB widget, and there is no bottle there :) You should change your code as follows:

var viewModule = require("ui/core/view");
var page;
exports.pageLoaded = function (args) {
   page = args.object;
}
exports.fabTap = function (args) {
   var bottle = page.getViewById("bottle");
   console.log("Height: " + bottle.height);
}

本文标签： javascriptAccessing element height in NativeScriptStack Overflow