DEV Community

Meyti
Meyti

Posted on

Get dimensions in nativescript-vue

Get screen size:

docs

import { screen } from 'platform'

screen.mainScreen.widthDIPs 
screen.mainScreen.widthPixels
screen.mainScreen.heightDIPs
screen.mainScreen.heightPixels

Get element size:


<Button ref="myElement" width="300" height="auto" />

this.$refs.myElement.nativeView.width  // 300
this.$refs.myElement.nativeView.height  // 'auto'
this.$refs.myElement.nativeView.getMeasuredWidth() // 600 (on Nexus 4)
this.$refs.myElement.nativeView.getMeasuredHeight()
this.$refs.myElement.nativeView.getActualSize() // { width: 300, height: 200 }

Note:
Make sure the element already rendered, and seems there is no such event to set a hook, so just take a nap!

export default {
  mounted () {
    setTimeout(() => {
      console.log(this.$refs.myElement.nativeView.width)
    }, 10)
  }
}

Links:

Top comments (0)