初學(xué)者在一開始接觸到RN的時候，可能在寫樣式的時候，會直接寫成
test: {
height: 64,
width: 64,
}
這樣寫有什么不好呢筒主？我們看處理前和處理后的對比，以及大手機和小手機的對比
處理前大小手機之間對比.jpg
處理后帶下手機之間對比.jpg
對于適配來說，在大手機上顯示的就是相對大一點乌妙，在小手機上就會相對小一點使兔，而看上面兩幅圖對比一下，處理前在大手機上反而高度要小冠胯，但是我們做了一番處理之后火诸，在iPhone8 Plus上就能夠做到適應(yīng)了，下面是我封裝的RN里面可以做到自適應(yīng)各種手機大小的長度單位
import {
Dimensions,
Platform
} from 'react-native';
//獲取屏幕大小
const { width, height } = Dimensions.get("window");
const ScreenWidth = Math.min( width, 540); //判斷是否是 iphone Plus
//db數(shù)值轉(zhuǎn)化
export function getPixel(num, designWidth = 375) {
return num * ScreenWidth / designWidth ;
}
就這樣荠察，我們在需要調(diào)用這個函數(shù)的文件里面引入該文件置蜀，就能使用了
例如我的這個是存放在common文件夾里的common.js
import { getPixel } from './common/common'
//下面樣式中便可以這樣用：
test: {
height: getPixel(64),
width: getPixel(64),
}
其實寫這個函數(shù)的原理就類似于我們寫h5頁面時使用rem做適配一樣。
今天分享到此哦～～ 有問題可以留言～～
