react-native-fast-app 详解与使用之(四)屏幕适配

不问归期 提交于 2020-04-29 18:45:04

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

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

可能有人觉得,RN的适配一般不都是根据目标屏幕的尺寸对当前UI尺寸进行一定比例的缩放么,直接定义一个获取缩放比例的方法不就可以了么?

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

UI多屏幕适配

RN平台默认的尺寸就是不带单位的,使用的是设备独立像素,但由于手机的尺寸也越来越多,比如说相同尺寸,像素密不同结果导致UI的物理尺寸也不同,所以通常来说,我们们需要根据屏幕的尺寸对UI的尺寸进行一定比例的缩放。

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

当前开发库的实现思路是,通过RFView、RFText、RFImage的重定义,将传入组件的style属性做一次重置(将所有涉及尺寸的属性值重置为乘以缩放比例后的值)。至于UI的尺寸属性,在React Native源代码中就可以找到(目前以白名单的形式定义)。这样,在使用以上RFXXX等系列UI组件的时候不需要做任何特别处理,即可自动实现多屏幕适配。

当然,要想RFXXX系列组件支持的前提还是:得设置一个参考屏幕尺寸(设计同学做UI的时候使用的参考屏幕尺寸),代码如下:

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

我们找个UI看看适配前后的区别(sample项目的列表页面,适配前后):

 
5s_iphoneX_iphone Xs Max_before.png
 
5s_iphoneX_iphone Xs Max_after.png

可以看到,适配后在5S屏幕上UI比较明显(相应的UI尺寸缩小了一些)。
UI布局页面适配如下(sample项目的UI组件页面,适配前后):

 
5s_iphoneX_iphone Xs Max_UI_before.png
 
5s_iphoneX_iphone Xs Max_UI_after.png

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

可能有同学想,RFXXX组件都做了屏幕适配但一些特别情况下,可能不需要作适配怎么办,比如说外层容器组件(有的时候会设置一个定值),这时候有两种办法:

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

**所以当大家需要对app的用UI做多屏适配的情况下,尽可能多的使用RFXXX系列组件就行了(记得设置参考屏幕哦) **

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

如果有任何疑问,欢迎扫码加入RN技术QQ交流群

 
1531585724192_.pic_hd.jpg
易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!