react-native-easy-app 详解与使用之（四）屏幕适配

react-native-easy-app 是一款为React Native App快速开发提供基础服务的纯JS库(支持 IOS & Android)，特别是在从0到1的项目搭建初期，至少能够为开发者减小30%的工做量。

react-native-easy-app 主要作了这些工做：
1. 对AsyncStorage进行封装，开发者只需几行代码便可实现一个持久化数据管理器。
2. 对fetch进行封装，使得开发者只需关注当前App的先后台交互逻辑和协议，定义好参数设置及解析逻辑便可。
3. 从新封装了RN的View、Text、Image、FlatList 使用得这些控件在适当的时候支持事件或支持icon与文本，能有效减小布局中的嵌套逻辑。
4. 经过设置一个屏幕参考尺寸，重置XView、XText、XImage的尺寸，实现自动多屏适配

可能有人以为，RN的适配通常不都是根据目标屏幕的尺寸对当前UI尺寸进行必定比例的缩放么，直接定义一个获取缩放比例的方法不就能够了么？

一千我的心中，有一千个哈姆雷特，也许个人封装思路能给你带来不同的启发也未可知呢？

UI多屏幕适配

RN平台默认的尺寸就是不带单位的，使用的是设备独立像素，但因为手机的尺寸也愈来愈多，好比说相同尺寸，像素密不一样结果致使UI的物理尺寸也不一样，因此一般来讲，咱们们须要根据屏幕的尺寸对UI的尺寸进行必定比例的缩放。

但UI的尺寸属性太多了，每次都调用相应的尺寸比例方法去计算，不只看着代码不雅观并且代码量也明显增多，那有没有更好的办法呢？

当前开发库的实现思路是，经过XView、XText、XImage的重定义，将传入组件的style属性作一次重置（将全部涉及尺寸的属性值重置为乘以缩放比例后的值）。至于UI的尺寸属性，在React Native源代码中就能够找到（目前以白名单的形式定义）。这样，在使用以上X系列UI组件的时候不须要作任何特别处理，便可自动实现多屏幕适配。

固然，要想X系列组件支持的前提仍是：得设置一个参考屏幕尺寸（设计同窗作UI的时候使用的参考屏幕尺寸），代码以下：

XWidget.initReferenceScreen(375, 667); //iphone 6 屏幕

咱们找个UI看看适配先后的区别（sample项目的列表页面，适配先后）：

能够看到，适配后在5S屏幕上UI比较明显（相应的UI尺寸缩小了一些）。
UI布局页面适配以下（sample项目的UI组件页面，适配先后）：

依然在5S上表现比较明显，适配前UI组件高、宽不太协调，特别是Image组件相对比较拥挤，但适配后就天然多了。在Xs Max上，UI组件由以前偏小，后适配后，相对应的都放大了也显得天然了(大屏、高分辨率屏幕上UI尺寸过小看着比较吃力)

可能有同窗想，X系列组件都作了屏幕适配但一些特别状况下，可能不须要做适配怎么办，好比说外层容器组件（有的时候会设置一个定值），这时候有两种办法：

1. 改用系统原生组件
2. 设置X系列组件属性 raw = {true}，设置了此属性，当前UI尺寸就不会作任何缩放

因此当你们须要对app的用UI作多屏适配的状况下，尽量多的使用X系列组件就好了（记得设置参考屏幕哦）

想进一步了解，请移步至 npm 或github查看 react-native-easy-app，有源码及使用示例，待你们一探究竟，欢迎朋友们 Star！