React Native 其他组件之 PixelRatio

PixelRatio 类提供了访问设备的像素密度的方法。

像素网格对齐

在 iOS 设备上，你可以给元素指定任意精度的坐标和尺寸，例如 29.674825。不过最终的物理屏幕上只会显示固定的坐标数。譬如 iPhone4 的分辨率是 640x960，而 iPhone6 是 750*1334。iOS 会试图尽可能忠实地显示你指定的坐标，所以它采用了一种把一个像素分散到多个像素里的做法来欺骗眼睛。但这个作用的负面影响是显示出来的元素看起来会有一些模糊。

在实践中，我们发现开发者们并不想要这个特性，反而需要去做一些额外的工作来确保坐标与像素坐标对齐，来避免元素显得模糊。在 React Native 中，我们会自动对齐坐标到像素坐标。

我们做这个对齐的时候必须十分小心。如果你同时使用已经对齐的值和没有对齐的值，就会很容易产生一些因为近似导致的累积错误。即使这样的累积错误只发生一次，后果也可能会很严重，因为很可能会导致一个像素宽的边框最终突然消失或者显示为两倍的宽度。

在 React Native 中，所有 JS 中的东西，包括布局引擎，都使用任意精度的数值。我们只在主线程最后设置原生组件的位置和坐标的时候才去做对齐工作。而且，对齐是相对于屏幕进行的，而非相对于父元素进行，进一步避免近似误差的累积。

方法

• get()
  返回设备像素密度。
• getFontScale()
  返回字体大小的缩放因子。
• getPixelSizeForLayoutSize()
  将布局大小（dp）舍入为与整数个像素对应的最近布局大小。

实例

1. 逻辑代码

import React, {Component} from 'react';
import {
  StyleSheet,
  View,
  Text,
  PixelRatio
} from 'react-native';

export default class App 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: 'red',
  },
  item: {
    flex: 1,
    height: 80,
  },
  flexs: {
    flex: 1,
  },
  center: {
    justifyContent: 'center',
    alignItems: 'center',
  },
  font: {
    color: 'white',
    fontSize: 16,
    fontWeight: 'bold',
  },
  lineLeftRight: {
    borderLeftWidth: 1 / PixelRatio.get(),
    borderRightWidth: 1 / PixelRatio.get(),
    borderColor: 'white',
  },
  lineBottom: {
    borderBottomWidth: 1 / PixelRatio.get(),
    borderColor: 'white',
  },
})

2. 效果图

pixel.jpg