*PixelRatio类允许访问设备像素密度。
- 获取正确大小的图像
如果您使用的是高像素密度设备，则应该获得更高分辨率的图像。一个好的经验法则是将您显示的图像的大小乘以像素比率。
var image = getImage({
width: PixelRatio.getPixelSizeForLayoutSize(200),
height: PixelRatio.getPixelSizeForLayoutSize(100),
});
<Image source={image} style={{width: 200, height: 100}} />
- 像素网格贴紧
在iOS中，您可以为任意精度的元素指定位置和尺寸，例如29.674825。但是，最终物理显示屏只有固定的像素数量，例如iPhone 4的640×960或iPhone 6的750×1334。iOS会尽量忠实于用户的价值，将一个原始像素分散为多个像素欺骗眼睛。这种技术的不足之处在于它使得生成的元素看起来模糊。
在实践中，我们发现开发人员不希望使用此功能，他们必须通过手动舍入来解决此问题，以避免出现模糊元素。在React Native中，我们会自动四舍五入所有像素。
我们必须小心谨慎。你不想在积累舍入误差的同时使用四舍五入的值。即使有一个舍入误差也是致命的，因为一个像素边界可能会消失或是两倍大。
在React Native中，JavaScript中和布局引擎中的所有内容都可以使用任意精度数字。只有当我们在主线程上设置本地元素的位置和尺寸时，此外，舍入是相对于根而不是父亲完成的，以避免累积舍入错误。
- Methods
static get()
返回设备像素密度。一些例子：
PixelRatio.get() === 1
mdpi Android devices (160 dpi)
PixelRatio.get() === 1.5
hdpi Android devices (240 dpi)
PixelRatio.get() === 2
iPhone 4, 4S
iPhone 5, 5c, 5s
iPhone 6
xhdpi Android devices (320 dpi)
PixelRatio.get() === 3
iPhone 6 plus
xxhdpi Android devices (480 dpi)
PixelRatio.get() === 3.5
Nexus 6
-
static getFontScale()
返回字体大小的缩放因子。这是用来计算绝对字体大小的比率，所以任何严重依赖于它的元素都应该使用它来进行计算。
如果未设置字体比例，则返回设备像素比率。
目前这只在Android上实现，并反映在设置>显示>字体大小中设置的用户偏好，在iOS上它将始终返回默认的像素比例。@platform android
static getPixelSizeForLayoutSize(layoutSize)
将布局大小（dp）转换为像素大小（px）。
保证返回一个整数。
static roundToNearestPixel(layoutSize)
将布局大小（dp）舍入为与整数个像素对应的最近布局大小。例如，在PixelRatio为3的设备上PixelRatio.roundToNearestPixel(8.4) = 8.33，它恰好对应于（8.33 * 3）= 25像素。static startDetecting()
// iOS没有运行，但在网络上使用。不应该记录。
用例
- 显示一条和设备许可一样细的线
宽度 1 实际上相当于 iPhone4+ 的厚度，我们可以使用设定宽度为 1 / PixelRatio.get() 的函数来实现。这是一项独立于像素密度的应用在所有设备上的技术。
style={{ borderWidth: 1 / PixelRatio.get() }}
在 React Native 开发中，使用的尺寸单位是 pt，但由于移动设备的像素密度不一样，即 1pt 对应的像素个数是不一样的。为此，React Native 提供了 PixelRatio API 来告知开发者当前设备的像素密度。
注意：在RN中， PixelRatio 指的是 devicePixelRatio，即 window.devicePixelRatio，
window.devicePixelRatio 是设备上物理像素和设备独立像素(device-independent pixels (dips))的比例。公式表示就是：
window.devicePixelRatio = 物理像素 / dips
其中dip或dp,（device independent pixels，设备独立像素）与屏幕密度有关。
以phone4为例：
主屏尺寸：3.5英寸 (对角线)
主屏分辨率：640x960像素-->屏幕物理像素
屏幕独立像素：320x480 像素
计算设备的像素密度：devicePixelRatio = 640/320 = 2
相关单位："Points", pt，大小固定，属于绝对单位，适用于印刷、打印媒体。
如何使用
- 导入PixelRatio
import React, { Component } from 'react';
import {
AppRegistry,
StyleSheet,
Text,
View,
PixelRatio,
} from 'react-native';
- 使用PixelRatio
lineLeftRight:{
borderLeftWidth:1/PixelRatio.get(),
borderRightWidth:1/PixelRatio.get(),
borderColor:'#FFF',
},
lineBottom:{
borderBottomWidth:1/PixelRatio.get(),
borderColor:'#fff',
},
- 使用样式
<View style={[styles.item,styles.lineLeftRight]}></View>
<View style={[styles.flexs,styles.center,styles.lineBottom]}><Text style={[styles.font]}>海外酒店</Text></View>
<View style={[styles.flexs,styles.center,styles.lineBottom]}><Text style={[styles.font]}>团购</Text></View>
** 完整代码**
import React, { Component } from 'react';
import {
AppRegistry,
StyleSheet,
Text,
View,
PixelRatio,
} from 'react-native';
export default class MyApp extends Component {
render() {
return(
<View style={[styles.flexs]}>
<View style={[styles.container]}>
<View style={[styles.item,styles.center]}><Text style={[styles.font]}>酒店</Text></View>
<View style={[styles.item,styles.lineLeftRight]}>
<View style={[styles.flexs,styles.center,styles.lineBottom]}><Text style={[styles.font]}>海外酒店</Text></View>
<View style={[styles.flexs,styles.center]}><Text style={[styles.font]}>特惠酒店</Text></View>
</View>
<View style={[styles.item]}>
<View style={[styles.flexs,styles.center,styles.lineBottom]}><Text style={[styles.font]}>团购</Text></View>
<View style={[styles.flexs,styles.center]}><Text style={[styles.font]}>客栈,公寓</Text></View>
</View>
</View>
</View>
);
}
}
const styles = StyleSheet.create({
container: {
marginTop:200,
marginLeft:5,
marginRight:5,
height:84,
flexDirection:'row',
borderRadius:5,
padding:2,
backgroundColor:'#FF0067',
},
item:{
flex:1,
height:80,
},
flexs:{
flex:1,
},
center:{
justifyContent:'center',
alignItems:'center',
},
font:{
color:'#FFF',
fontSize:16,
fontWeight:'bold',
},
lineLeftRight:{
borderLeftWidth:1/PixelRatio.get(),
borderRightWidth:1/PixelRatio.get(),
borderColor:'#FFF',
},
lineBottom:{
borderBottomWidth:1/PixelRatio.get(),
borderColor:'#fff',
},
});
AppRegistry.registerComponent('MyApp', () => MyApp);
效果图
