Dimensions
在React Native中通常使用Dimensions获取屏幕宽高。
Dimensions的方法
Dimensions的使用很简单,它只提供了两个方法:
static set(dims: {[key:string]: any})
该方法应该只能被原生代码进行调用。
@param {object} dims 一个简单的字符串作为key的对象,包含了需要设置的屏幕宽高信息。
static get(dim: string)
初始的尺寸信息应该在runApplication之后被执行,所以它可以在任何其他的require被执行之前就可用。不过在稍后可能还会发生变化。
注意:尽管尺寸信息立即就可用,但它可能会在将来被修改(例如屏幕的方向发生旋转),所以基于这些常量的渲染逻辑和样式应当每次render之后都调用此函数,而不是将对应的值保存下来。(举例来说,你可能需要使用内联的样式而不是在StyleSheet中保存相应的尺寸,简单来说什么时候需要使用屏幕信息,就什么时候去调用该方法)。
实例代码:var {height, width} = Dimensions.get('window');
@param {string} dim 想要获取的尺寸信息的字段名。
@returns {Object?} 返回的尺寸信息值。
具体实例
import React, { Component } from 'react';
import {
AppRegistry,
StyleSheet,
Text,
View,
Dimensions, } from 'react-native';
export default class DimensionsDemo extends Component {
render() {
return (
<View style={styles.container}>
<Text style={styles.instructions}>
width:{Dimensions.get('window').width}
</Text>
<Text style={styles.instructions}>
height:{Dimensions.get('window').height}
</Text>
</View>
);
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: 'center',
alignItems: 'center',
backgroundColor: '#F5FCFF',
},
instructions: {
textAlign: 'center',
color: '#333333',
marginBottom: 5,
},
});
在小米5上运行结果如下:
这里不禁有个疑问了,这个宽360、高640,它们的长度单位是什么?Android开发的朋友可能会微微一笑,360X640这个组合再熟悉不过了,不错,React Native默认的长度单位为dp(device independent pixels)设备独立像素,也称dip。Android开发布局时常常采用dp作为控件的长度单位。
单位转换
- px (pixels)像素
对应屏幕上的实际像素点。 - dp (device independent pixels)设备独立像素,也称dip
逻辑长度单位,在 160 dpi 屏幕上,1dp=1px=1/160英寸。随着密度变化,对应的像素数量也变化。它和设备硬件有关,不依赖像素。
dp 与 px 有一个关于 (160/screen density) 的正相关的关系:
1dp = 1物理px (screen density = 160)
1dp = 2物理px (screen density = 320)
1dp = 3物理px (screen density = 480)
dp与px的关系为:1dp = 1px * (160/screen density)
这里 (160/screen density) 实际上就是我们后面要介绍的pixelRatio。
PixelRatio
PixelRatio类提供了访问设备的像素密度的方法。
PixelRatio的方法
static get()
返回设备的像素密度。例如:
像素密度 | 设备 |
---|---|
PixelRatio.get() === 1 | mdpi Android 设备 (160 dpi) |
PixelRatio.get() === 1.5 | hdpi Android 设备 (240 dpi) |
PixelRatio.get() === 2 | iPhone 4, 4S, iPhone 5, 5c, 5s,iPhone 6,xhdpi Android 设备 (320 dpi) |
PixelRatio.get() === 3 | iPhone 6 plus,xxhdpi Android 设备 (480 dpi) |
PixelRatio.get() === 3.5 | Nexus 6 |
static getFontScale()
返回字体大小缩放比例。这个比例可以用于计算绝对的字体大小,所以很多深度依赖字体大小的组件需要用此函数的结果进行计算。
如果没有设置字体大小,它会直接返回设备的像素密度。
目前这个函数仅仅在Android设备上实现了,它会体现用户选项里的设置(设置 > 显示 > 字体大小)。在iOS设备上它会直接返回默认的像素密度。static getPixelSizeForLayoutSize(layoutSize: number)
将一个布局尺寸(dp)转换为像素尺寸(px)。
一定会返回一个整数数值。
具体实例
import React, { Component } from 'react';
import {
AppRegistry,
StyleSheet,
Text,
View,
PixelRatio, } from 'react-native';
export default class PixelRatioDemo extends Component {
render() {
return (
<View style={styles.container}>
<Text style={styles.content}>
pxielRatio={PixelRatio.get()}
</Text>
<Text style={styles.content}>
{PixelRatio.getPixelSizeForLayoutSize(200)}
</Text>
<Text style={styles.content}>
{200*PixelRatio.get()}
</Text>
</View>
);
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: 'center',
alignItems: 'center',
backgroundColor: '#F5FCFF',
},
content: {
textAlign: 'center',
color: '#333333',
marginBottom: 5,
},
});
还是用小米5测试:
可以看到getPixelSizeForLayoutSize的结果与我们自己计算的结果相同,验证了:
1dp = 1px * pixelRatio