初学者在一开始接触到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做适配一样。
今天分享到此哦~~ 有问题可以留言~~
网友评论