react native 字體不隨系統(tǒng)字體變化而變---liu_520
rn寫的軟件內(nèi)的字體（text組件）會(huì)隨著手機(jī)系統(tǒng)字體大小的變化而變沪伙。
1声畏、android 的解決方案是:
const fontSizeScaler = PixelRatio.get()/PixelRatio.getFontScale()
fontSize:18*fontSizeScaler
其中用到了PixelRatio的兩個(gè)方法浊服，
get() 返回設(shè)備的像素密度,
getFontScale()返回字體大小縮放比例. 這個(gè)比例可以用于計(jì)算絕對(duì)的字體大小, 所以很多深度依賴字體大小的組件需要用此函數(shù)的結(jié)果進(jìn)行計(jì)算.
如果沒有設(shè)置字體大小, 它會(huì)直接返回設(shè)備的像素密度.
目前這個(gè)函數(shù)僅僅在Android設(shè)備上實(shí)現(xiàn)了, 它會(huì)體現(xiàn)用戶選項(xiàng)里的 "設(shè)置 > 顯示 > 字體大小". 在iOS設(shè)備上它會(huì)直接返回默認(rèn)的像素密度.
感興趣的同學(xué)可以打印測(cè)試下：
字體隨著系統(tǒng)字體變化
由此我們可以看出存璃，系統(tǒng)的字體越大叉存，PixelRatio.getFontScale()字體的縮放比越大，反之越小昙衅，fontSizeScaler的值就越小和系統(tǒng)字體成反比扬霜，才能在系統(tǒng)字體變大的情況下，軟件的字體相對(duì)變小而涉，總體大小保持不變
2著瓶、ios 的解決方案是:
ios 上返回的默認(rèn)就是像素密度，所以不起作用啼县，需要用到text的一個(gè)屬性材原，這個(gè)屬性只對(duì)ios生效：
allowFontScaling={false}
這樣的話，軟件中的字體就不會(huì)隨著系統(tǒng)字體的變化而變了季眷，但是不管在大屏7plus還是小屏5s余蟹，字體的大小都是一樣的，這樣在小屏幕手機(jī)上布局又會(huì)變化瘟裸。
這樣的話我們要針對(duì)小屏幕的手機(jī)再次優(yōu)化客叉，判斷像素比诵竭。
if (pixelRatio === 2) {
// iphone 5s and older Androids
if (deviceWidth < 360) {
return size * 0.95;
}
// iphone 5
if (deviceHeight < 667) {
return size;
// iphone 6-6s
} else if (deviceHeight >= 667 && deviceHeight <= 735) {
return size * 1.15;
}
// older phablets
return size * 1.25;
}
if (pixelRatio === 3) {
// catch larger devices
// ie iphone 6s plus / 7 plus / mi note 等等
return size * 1.27;
}
里面的比值大家根據(jù)自己的實(shí)際情況自行調(diào)整话告，
