美文网首页让前端飞
react-native中长度单位换算

react-native中长度单位换算

作者: 雅玲哑铃 | 来源:发表于2018-12-14 21:23 被阅读1次

初学者在一开始接触到RN的时候,可能在写样式的时候,会直接写成

test: {
   height: 64,
   width: 64,
}

这样写有什么不好呢?我们看处理前和处理后的对比,以及大手机和小手机的对比

处理前大小手机之间对比.jpg 处理后带下手机之间对比.jpg

对于适配来说,在大手机上显示的就是相对大一点,在小手机上就会相对小一点,而看上面两幅图对比一下,处理前在大手机上反而高度要小,但是我们做了一番处理之后,在iPhone8 Plus上就能够做到适应了,下面是我封装的RN里面可以做到自适应各种手机大小的长度单位

import {
   Dimensions,
   Platform
} from 'react-native';


//获取屏幕大小
const { width, height } = Dimensions.get("window");
const ScreenWidth = Math.min( width, 540); //判断是否是 iphone Plus


//db数值转化
export function getPixel(num, designWidth = 375) {
   return num * ScreenWidth / designWidth ;
}

就这样,我们在需要调用这个函数的文件里面引入该文件,就能使用了

例如我的这个是存放在common文件夹里的common.js

import { getPixel } from './common/common'
//下面样式中便可以这样用:
test: {
    height: getPixel(64),
    width: getPixel(64),
}

其实写这个函数的原理就类似于我们写h5页面时使用rem做适配一样。

今天分享到此哦~~ 有问题可以留言~~

相关文章

  • react-native中长度单位换算

    初学者在一开始接触到RN的时候,可能在写样式的时候,会直接写成 这样写有什么不好呢?我们看处理前和处理后的对比,以...

  • react-native 布局篇

    react-native 布局篇之单位换算(px转dp) react-native 布局篇之flexbox rea...

  • 小学数学单位换算公式大全及专项训练

    在小学数学的学习中,单位换算贯穿始终。在小学阶段,主要涉猎的单位换算包括长度、面积、体积、重量、人民币以及时间方面...

  • 初二物理第一章第二节 测量

    2.测量:实验探究的重要环节 1.认识米:在国际单位制中,长度的基本单位是米,符号m。 2长度单位的换算 3.长度...

  • 第4单元毫米和千米。

    单元总目标。1,在实践生活中,体会并认识长度单位千米,知道毫米,了解相邻墙长度,单位间的进率,能进行简单的单位换算...

  • 《千米和吨》教学反思

    本课重点是建立1千米的长度观念,能进行长度单位间的简单换算;感知和了解1吨的含义,能进行质量单位间的简单换算;...

  • 《千米和吨》教学反思

    本课重点是建立1千米的长度观念,能进行长度单位间的简单换算;感知和了解1吨的含义,能进行质量单位间的简单换算...

  • 考前什么最重要

    下周一就是期末考试了,洋宝最后一次数学成绩是C,主要对米、分米、厘米、毫米这些长度单位换算以及长度单位的平方换算比...

  • 单位换算

    张长占 济南市民生大街小学 谈话导入:这几年学了哪些单位换算? 生:时间,长度,体积,容积… 想想单位换算你们都是...

  • css中的px、em、rem 详解

    概念介绍: 1、px (pixel,像素): 是一个虚拟长度单位,是计算机系统的数字化图像长度单位,如果px要换算...

网友评论

    本文标题:react-native中长度单位换算

    本文链接:https://www.haomeiwen.com/subject/eozghqtx.html