详解ReactNative屏幕适配（炒鸡简单的⽅法）
前⾔
React Native 可以开发 ios 和 android 的 app，在开发过程中，势必会遇上屏幕适配（ios 好⼏种尺⼨的屏幕以及 android 各种尺⼨的屏幕）的问题，下⾯介绍⼀种⼏⾏代码搞定 RN 适配的⽅法！
reactnativeui框架
屏幕适配的前置知识
RN 中的尺⼨单位为 dp，⽽设计稿中的单位为 px
原理
虽然单位不同，但是元素所占屏幕宽度的⽐例是相同的
利⽤元素所占屏幕⽐例不变的特性，来将 px 转为 dp（这样实现屏幕适配的话，在不同尺⼨的屏幕下，元素会等⽐放⼤或缩⼩）
公式如下：
设计稿元素宽度（px） / 设计稿总宽度（px） = 元素的宽度（dp） / 屏幕的总宽度（dp）
我们要求的就是元素的宽度（dp）
可以得出：
元素的宽度（dp） = 设计稿元素宽度（px）* 屏幕的总宽度（dp） / 设计稿总宽度（px）
代码实现
// util.js
import { Dimensions } from 'react-native';
// 设备宽度，单位 dp
const deviceWidthDp = ('window').width;
// 设计稿宽度（这⾥为640px），单位 px
const uiWidthPx = 640;
// px 转 dp（设计稿中的 px 转 rn 中的 dp）
export const pTd = (uiElePx) => {
return uiElePx * deviceWidthDp / uiWidthPx;
}
使⽤
每次给元素设置尺⼨样式时，使⽤ pTd() 函数即可（传⼊设计稿中元素的实际 px）。
以上就是本⽂的全部内容，希望对⼤家的学习有所帮助，也希望⼤家多多⽀持。

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。