React-Native中屏幕的适配问题

React-Native中屏幕的适配问题

接触React-Native快一个多月了，从了解语法到尝试着在项目中写了几个页面，因为项目需要能适应所有的屏幕尺寸，这时候问题就出现了，当你在测试机中调试完成后，安装在小屏幕尺寸的手机上会发现排版出现了问题；刚开始我只是通过调整各个组件的width和fontSize，通过调整找到一个合适的值，但是看着总是有点别扭，在小屏幕上太拥挤，在大屏幕上有点稀疏，对于有点强迫症的我来说，有点接受不了；不过在我寻求了好久之后问题还是解决了。好了，废话不多说，看看解决方案吧！

---

Dimension

这个API主要是给用户提供关于设备屏幕的一些参数信息，通过这些参数即可做相应的调整(本文采用ES6语法实现)

1.引入API

import {
    View,
    Text,
    StyleSheet,
    Dimensions,
    Image,
} from 'react-native';

引入很简单，只是在import react-native时添加组件即可

2.获取屏幕信息

const width = Dimensions.get('window').width;           //获取屏幕宽度
const width = Dimensions.get('window').height;           //获取屏幕高度
const scale = Dimensions.get('window').scale;           //获取屏幕分辨率

通过Dimensions.get(‘window’).参数来获取屏幕参数

width和height操作很简单，通常是在约束组件的大小的时候使用，根据百分比显示；

例如：设置组件的长度为屏幕的90%：width = Dimensions.get(‘window’).width * 0.9

3.scale

scale为获取屏幕分辨率，单独放在这儿说是因为它的数据有点特殊，所以专门整理一下,参考文章

• 1———-mdpi Android 设备 (160 dpi)
• 1.5——–hdpi Android 设备 (240 dpi)
• 2———-iPhone 4,4S,5,5c,5s,6,6s,7 xhdpi Android 设备 (320 dpi)
• 3———-iPhone 6/6s/7 plus xxhdpi Android 设备 (480 dpi)
• 3.5——–测试为2k分辨率屏幕

该数据为获取的设备屏幕的信息，可以根据该信息进行相应的判断操作。具体的代码就不详细上传了，主要是参数的问题以及在设备上调试。

PixelRatio

该API为官方给出的访问设备的像素密度的方法。详见官网

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)。一定会返回一个整数数值。

static startDetecting()

// 本函数在移动设备上没有作用。

描述

在iOS设备上，你可以给元素指定任意精度的坐标和尺寸，例如29.674825。不过最终的物理屏幕上只会显示固定的坐标数。譬如iPhone4的分辨率是640x960，而iPhone6是750*1334。iOS会试图尽可能忠实地显示你指定的坐标，所以它采用了一种把一个像素分散到多个像素里的做法来欺骗眼睛。但这个作用的负面影响是显示出来的元素看起来会有一些模糊。
在实践中，我们发现开发者们并不想要这个特性，反而需要去做一些额外的工作来确保坐标与像素坐标对齐，来避免元素显得模糊。在React Native中，我们会自动对齐坐标到像素坐标。
我们做这个对齐的时候必须十分小心。如果你同时使用已经对齐的值和没有对齐的值，就会很容易产生一些因为近似导致的累积错误。即使这样的累积错误只发生一次，后果也可能会很严重，因为很可能会导致一个像素宽的边框最终突然消失或者显示为两倍的宽度。
在React Native中，所有JS中的东西，包括布局引擎，都使用任意精度的数值。我们只在主线程最后设置原生组件的位置和坐标的时候才去做对齐工作。而且，对齐是相对于屏幕进行的，而非相对于父元素进行，进一步避免近似误差的累积。

---

大概就是这样了，通过好多次的调整才能实现一个满意的界面，加油！