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

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

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_iphoneX_iphone_Xs_Max_before

5s_iphoneX_iphone_Xs_Max_after

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

5s_iphoneX_iphone_Xs_Max_UI_before

5s_iphoneX_iphone_Xs_Max_UI_after

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

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

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

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

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

目录
相关文章
|
Android开发 编解码 API
Android APP全方位性能调优之屏幕适配终结者
优点 1. 无侵入性 首先科普下 Android 中的一个长度单位:pt,它表示一个点,是屏幕的物理尺寸,其大小为 1 英寸的 1 / 72,也就是 72pt 等于 1 英寸(其实 Android 中还有比较少见的 in 和 mm 的长度单位)。
1254 0
|
移动开发 前端开发
[react-native]宽、高,字体大小屏幕适配工具
最近弄了个react-native的项目,当做学习rn,先放个工具类,后期慢慢更其他东西; 直接上代码,代码也不多; 做到宽、高、字体大小的不同适配(实现很简单,只是为了按不同屏幕大小进行百分比) 'use str...
3273 0
|
1天前
|
XML 移动开发 前端开发
使用duxapp开发 React Native App 事半功倍
对于Taro的壳子,或者原生React Native,都会存在 `android` `ios`这两个文件夹,而在duxapp中,这些文件夹的内容是自动生成的,那么对于需要在这些文件夹中修改的配置内容,例如包名、版本号、新架构开关等,都通过配置文件的方式配置了,而不需要需修改具体的文件
|
2天前
|
存储 开发工具 Android开发
使用.NET MAUI开发第一个安卓APP
【9月更文挑战第24天】使用.NET MAUI开发首个安卓APP需完成以下步骤:首先,安装Visual Studio 2022并勾选“.NET Multi-platform App UI development”工作负载;接着,安装Android SDK。然后,创建新项目时选择“.NET Multi-platform App (MAUI)”模板,并仅针对Android平台进行配置。了解项目结构,包括`.csproj`配置文件、`Properties`配置文件夹、平台特定代码及共享代码等。
|
27天前
|
Web App开发 Java 视频直播
FFmpeg开发笔记(四十九)助您在毕业设计中脱颖而出的几个流行APP
对于软件、计算机等专业的毕业生,毕业设计需实现实用软件或APP。新颖的设计应结合最新技术,如5G时代的音视频技术。示例包括: 1. **短视频分享APP**: 集成FFmpeg实现视频剪辑功能,如添加字幕、转场特效等。 2. **电商购物APP**: 具备直播带货功能,使用RTMP/SRT协议支持流畅直播体验。 3. **同城生活APP**: 引入WebRTC技术实现可信的视频通话功能。这些应用不仅实用,还能展示开发者紧跟技术潮流的能力。
63 4
FFmpeg开发笔记(四十九)助您在毕业设计中脱颖而出的几个流行APP
|
21天前
|
移动开发 小程序 JavaScript
uni-app开发微信小程序
本文详细介绍如何使用 uni-app 开发微信小程序,涵盖需求分析、架构思路及实施方案。主要功能包括用户登录、商品列表展示、商品详情、购物车及订单管理。技术栈采用 uni-app、uView UI 和 RESTful API。文章通过具体示例代码展示了从初始化项目、配置全局样式到实现各页面组件及 API 接口的全过程,并提供了完整的文件结构和配置文件示例。此外,还介绍了微信授权登录及后端接口模拟方法,确保项目的稳定性和安全性。通过本教程,读者可快速掌握使用 uni-app 开发微信小程序的方法。
52 3
|
1月前
|
Web App开发 Android开发
FFmpeg开发笔记(四十六)利用SRT协议构建手机APP的直播Demo
实时数据传输在互联网中至关重要,不仅支持即时通讯如QQ、微信的文字与图片传输,还包括音视频通信。一对一通信常采用WebRTC技术,如《Android Studio开发实战》中的App集成示例;而一对多的在线直播则需部署独立的流媒体服务器,使用如SRT等协议。SRT因其优越的直播质量正逐渐成为主流。本文档概述了SRT协议的使用,包括通过OBS Studio和SRT Streamer进行SRT直播推流的方法,并展示了推流与拉流的成功实例。更多细节参见《FFmpeg开发实战》一书。
41 1
FFmpeg开发笔记(四十六)利用SRT协议构建手机APP的直播Demo
|
1月前
|
Web App开发 5G Linux
FFmpeg开发笔记(四十四)毕业设计可做的几个拉满颜值的音视频APP
一年一度的毕业季来临,计算机专业的毕业设计尤为重要,不仅关乎学业评价还积累实战经验。选择紧跟5G技术趋势的音视频APP作为课题极具吸引力。这里推荐三类应用:一是融合WebRTC技术实现视频通话的即时通信APP;二是具备在线直播功能的短视频分享平台,涉及RTMP/SRT等直播技术;三是具有自定义动画特效及卡拉OK歌词字幕功能的视频剪辑工具。这些项目不仅技术含量高,也符合市场需求,是毕业设计的理想选择。
64 6
FFmpeg开发笔记(四十四)毕业设计可做的几个拉满颜值的音视频APP
|
1月前
|
编解码 Java Android开发
FFmpeg开发笔记(四十五)使用SRT Streamer开启APP直播推流
​SRT Streamer是一个安卓手机端的开源SRT协议直播推流框架,可用于RTMP直播和SRT直播。SRT Streamer支持的视频编码包括H264、H265等等,支持的音频编码包括AAC、OPUS等等,可谓功能强大的APP直播框架。另一款APP直播框架RTMP Streamer支持RTMP直播和RTSP直播,不支持SRT协议的直播。而本文讲述的SRT Streamer支持RTMP直播和SRT直播,不支持RTSP协议的直播。有关RTMP Streamer的说明参见之前的文章《使用RTMP Streamer开启APP直播推流》,下面介绍如何使用SRT Streamer开启手机直播。
54 4
FFmpeg开发笔记(四十五)使用SRT Streamer开启APP直播推流
|
1月前
|
IDE Java 开发工具
探索安卓开发之旅:打造你的第一款App
【8月更文挑战第24天】在这篇文章中,我们将一起踏上激动人心的安卓开发之旅。不论你是编程新手还是希望扩展技能的老手,本文将为你提供一份详尽指南,帮助你理解安卓开发的基础知识并实现你的第一个应用程序。从搭建开发环境到编写“Hello World”,每一步都将用浅显易懂的语言进行解释。那么,让我们开始吧!