Dimension的简单使用

这个api主要提供给用户来获取关于设备屏幕的一些信息,咱们可以用这个数值来对咱们的布局进行一些适配的设置。

不多说,先来看一下源码和官方文档是怎么写的:
源码地址
英文官方文档
中文官方文档

static set(dims: {[key:string]: any}) [](http://reactnative.cn/docs/0.22/dimensions.html#set)
这个函数只应该被原生代码调用。.
@param {object} dims 一个简单的字符串作为key的对象,包含了需要设置的尺寸信息。

static get(dim: string) [](http://reactnative.cn/docs/0.22/dimensions.html#get)
初始的尺寸信息应该在runApplication
之后被执行,所以它可以在任何其他的require被执行之前就可用。不过在稍后可能还会更新。
注意:尽管尺寸信息立即就可用,但它可能会在将来被修改(譬如设备的方向改变),所以基于这些常量的渲染逻辑和样式应当每次render之后都调用此函数,而不是将对应的值保存下来。(举例来说,你可能需要使用内联的样式而不是在StyleSheet
中保存相应的尺寸)。
例子:var {height, width} = Dimensions.get('window');

@param {string} dim 想要获取的尺寸信息的字段名。
@returns {Object?} 返回的尺寸信息值。

根据中文的官方文档,可以看到咱们可以通过这个API来获取到屏幕的宽和高,这样可以满足了咱们的大部分的适配需求,但是有时候可能还会考虑到图片的适配,及字体的字体,获取屏幕的宽、高就不够了。不过facebook还是考虑的很周到的,咱们可以来看一下下面这段源码:

dims.window = {

width: windowPhysicalPixels.width / windowPhysicalPixels.scale,

height: windowPhysicalPixels.height / windowPhysicalPixels.scale,

scale: windowPhysicalPixels.scale,

fontScale: windowPhysicalPixels.fontScale,

};

这虽然是set方法里面的一段代码,但是这个方法很清晰的告诉我们,通过window这个key,咱们不止可以获取到width,height的属性,还有scale以及fontScale这两个属性,如果有一定移动端开发经验的工程师来说已经可以猜到这两个属性分别代表的是什么含义。
scale提供的是这个机型的屏幕模式,ios现在提供两种模式分别是2及3,分别是普通机型及plus机型。相应的fontscale就是这个机型的字体模式。
现在咱们可以通过这两种属性去对更多机型的适配。

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • Android 自定义View的各种姿势1 Activity的显示之ViewRootImpl详解 Activity...
    passiontim阅读 172,909评论 25 708
  • 因为要结局swift3.0中引用snapKit的问题,看到一篇介绍Xcode8,swift3变化的文章,觉得很详细...
    uniapp阅读 4,467评论 0 12
  • 我一直都很向往大海,从只能想象的无边无际,到近在眼前的碧海蓝天。 内陆来的人看到海不免惊叹,留恋忘返,而我却觉得大...
    可乐良人阅读 714评论 0 0
  • 记录一下平常用的一些好用的工具软件,发现新的之后再随时来更新吧。 wunderlist
    jiango86阅读 184评论 0 0
  • 文|小步 一段感情,没有值不值,只有爱不爱。 在一个不爱你的人的眼里,你再美,再懂事,再优秀,你依然什么都不是。你...
    步步吖阅读 809评论 2 1