React Native 屏幕适配（炒鸡简单的方法）

WilsonLiu95 发布于2019-08-22 17:56 / 2474人阅读

摘要：前言可以开发和的，在开发过程中，势必会遇上屏幕适配好几种尺寸的屏幕以及各种尺寸的屏幕的问题，下面介绍一种几行代码搞定适配的方法屏幕适配的前置知识中的尺寸单位为，而设计稿中的单位为原理虽然单位不同，但是元素所占屏幕宽度的比例是相同的利用元素所

前言

React Native 可以开发 ios 和 android 的 app，在开发过程中，势必会遇上屏幕适配（ios 好几种尺寸的屏幕以及 android 各种尺寸的屏幕）的问题，下面介绍一种几行代码搞定 RN 适配的方法！

屏幕适配的前置知识

RN 中的尺寸单位为 dp，而设计稿中的单位为 px

原理

虽然单位不同，但是元素所占屏幕宽度的比例是相同的
利用元素所占屏幕比例不变的特性，来将 px 转为 dp（这样实现屏幕适配的话，在不同尺寸的屏幕下，元素会等比放大或缩小）

公式如下：

设计稿元素宽度（px） / 设计稿总宽度（px） = 元素的宽度（dp） / 屏幕的总宽度（dp）

我们要求的就是 元素的宽度（dp）

可以得出：

元素的宽度（dp） = 设计稿元素宽度（px）* 屏幕的总宽度（dp） / 设计稿总宽度（px）

代码实现

// util.js
import { Dimensions } from "react-native";

// 设备宽度，单位 dp
const deviceWidthDp = Dimensions.get("window").width;

// 设计稿宽度（这里为640px），单位 px
const uiWidthPx = 640;

// px 转 dp（设计稿中的 px 转 rn 中的 dp）
export const pTd = (uiElePx) => {
  return uiElePx * deviceWidthDp / uiWidthPx;
}

使用

每次给元素设置尺寸样式时，使用 pTd() 函数即可（传入设计稿中元素的实际 px）。

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/95341.html

React Native图片资源使用的优美方案

摘要：图片资源作为与用户交互的界面元素，在客户端产品中起到了非常重要的角色作用。在应用开发中，移动端与的图片使用策略也有所不同。端较大的内存容量，快速的渲染能力使各类型图片资源都能得到较好的使用。图片资源（ jpeg、png、svg、webp ... ）作为与用户交互的界面元素，在客户端产品中起到了非常重要的角色作用。在应用开发中，移动端与PC的图片使用策略也有所不同。PC端较大的内存容量，快速的...

fireflow 2019-05-23 14:32 评论0 收藏0
关于移动端适配，你必须要知道的

摘要：需要注意，上面的尺寸都是屏幕对角线的长度英寸缩写为在荷兰语中的本意是大拇指，一英寸就是指甲底部普通人拇指的宽度。由于手机尺寸为手机对角线的长度，我们通常使用如下的方法计算的为，那它每英寸约含有个物理像素点。导读移动端适配，是我们在开发中经常会遇到的，这里面可能会遇到非常多的问题： 1px问题 UI图完美适配方案 iPhoneX适配方案横屏适配高清屏图片模糊问题 ... ...

yibinnn 2019-05-21 12:23 评论0 收藏0