React Native屏幕尺寸适配

现在的手机品牌和型号越来越多，导致我们平时写布局的时候会在个不同的移动设备上显示的效果不同，

比如我们的设计稿一个View的大小是300，如果直接写300，可能在当前设备显示正常，但到了其他设备可能就会偏小或者偏大，这就需要我们对屏幕进行适配。

安卓原生的话有自己的适配规则，可以根据不同的尺寸建立不同的文件夹，系统会根据当前的设备尺寸取对应的大小的布局。而RN本身并没有适配规则，而原生的又比较反锁，这就需要我们自己去对屏幕进行适配。

rn中直接写宽高都是dp的

/*** 屏幕工具类* ui设计基准,iphone 6* width:750* height:1334*/
var ReactNative = require('react-native');
var Dimensions = require('Dimensions');
export var screenW = Dimensions.get('window').width;
export var screenH = Dimensions.get('window').height;
var fontScale = ReactNative.PixelRatio.getFontScale();
export var pixelRatio = ReactNative.PixelRatio.get();
const r2=2;
const w2 = 750/r2;``
const h2 = 1334/r2;
/*** 设置text为sp* @param size  sp* @returns {Number} dp*/
export const DEFAULT_DENSITY=2;
export function setSpText(size:Number) {var scaleWidth = screenW / w2;var scaleHeight = screenH / h2;var scale = Math.min(scaleWidth, scaleHeight);size = Math.round((size * scale + 0.5) * pixelRatio / fontScale);return size;
}
/*** 屏幕适配,缩放size* @param size* @returns {Number}* @constructor*/
export function scaleSize(size:Number) {var scaleWidth = screenW / w2;var scaleHeight = screenH / h2;var scale = Math.min(scaleWidth, scaleHeight);size = Math.round((size * scale + 0.5));return size/DEFAULT_DENSITY;
}

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

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

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

默认以iPhone6 宽高为基准。

用法

比如iPhone6 宽度为 1334

如果在iPhone6上设置宽度为一半。那么就是 1334 / 2 = 667

直接 W(667) 就可算出对应的设备缩放后的宽度了

宽度为W 函数，高度 H 函数，

百分比宽高为 WB,HB

PixelRatio类提供了访问设备的像素密度的方法，参考官网

样式中引用

const styles = StyleSheet.create({container: {backgroundColor: 'white',justifyContent: 'space-between',flexDirection: 'row',paddingTop: ScreenUtils.scaleSize(22),paddingBottom: ScreenUtils.scaleSize(22),paddingRight: ScreenUtils.scaleSize(12),paddingLeft: ScreenUtils.scaleSize(12),alignItems: 'center'},
});

React Native屏幕尺寸适配相关推荐

Android屏幕尺寸适配常见方案smallestWidth
前言介于目前的Android设备存在有不同的屏幕尺寸,屏幕分辨率,像素密度,Android应用在开发的过程必须要考虑到屏幕尺寸适配的问题,以保证在不同尺寸的Android设备上都能够正常运行. 基本 ...
聊聊React Native屏幕适配那些事儿
点击上方前端瓶子君,关注公众号回复算法,加入前端编程面试算法每日一题群作者:张子君原文:https://segmentfault.com/a/1190000039805723 写在前面在我从 ...
简析在React Native中如何适配iPhoneX
欢迎大家关注[跨平台开发那些事]公众号,定期推送跨平台开发技术实践. 一.介绍 iPhone X 发布也有一段时间了,独特的 "齐刘海",以及 "小嘴巴" 带给 ...
React Native 暗黑模式适配方案
Android设备在 10 之后提供了对于暗黑模式的支持, iOS也在 iOS13之后提供了同样的支持.React Native 在 0.62 版本中增加了对于暗黑模式功能的支持,用来提升App用户体 ...
关于android屏幕尺寸适配的整理以及思考
一直以来android屏幕尺寸相关的东西我都很薄弱,什么dpi, ppi, 英寸我都比较疑惑,本文主要是理清概念,理解头条的屏幕适配原理,以为目前我工作是如何做UI适配的. 一些基础概念屏幕尺寸屏 ...
flutter 屏幕尺寸适配字体大小适配，android面试常用算法
width: ScreenUtil().setWidth(375), height: ScreenUtil().setHeight(200), ), 适配字体: ScreenUtil().setSp( ...
Android屏幕尺寸适配注意事项
1 基本设置 1.1 AndroidManifest.xml设置在<manifest>中添加子元素<supports-screens android:largeS ...
前端屏幕尺寸适配拿走即用附加详细注释
rem适配方案无注释版本 // H5页面的rem适配计算自调用函数 (function(doc, win, baseW) {var docEl = doc.documentElement,resi ...
Android 根据屏幕尺寸适配控件大小（按比例缩放）
在写布局时就在想有没有一种方式跟随屏幕大小自动缩放呢? 寻思半天不如上手写个出来 package com.android.juzi.layout;import android.app.Activity ...

React Native屏幕尺寸适配

React Native屏幕尺寸适配相关推荐

最新文章

热门文章