国产探花免费观看_亚洲丰满少妇自慰呻吟_97日韩有码在线_资源在线日韩欧美_一区二区精品毛片,辰东完美世界有声小说,欢乐颂第一季,yy玄幻小说排行榜完本

首頁 > 學院 > 開發(fā)設計 > 正文

react native 字體不隨系統(tǒng)字體變化而變

2019-11-09 15:04:51
字體:
來源:轉載
供稿:網(wǎng)友

最近遇到了一個問題,rn寫的軟件內的字體(text組件)會隨著手機系統(tǒng)字體大小的變化而變,也就是說當你把手機系統(tǒng)的顯示-字體調到最大號,打開軟件,text的字體會變得非常大,布局就亂了。

下面就這個問題提供下解決的方案:

1、android 的解決方案是:

const fontSizeScaler = PixelRatio.get()/PixelRatio.getFontScale()

fontSize:18*fontSizeScaler

其中用到了PixelRatio的兩個方法,

    get() 返回設備的像素密度,

    getFontScale()返回字體大小縮放比例. 這個比例可以用于計算絕對的字體大小, 所以很多深度依賴字體大小的組件需要用此函數(shù)的結果進行計算.

如果沒有設置字體大小, 它會直接返回設備的像素密度.

目前這個函數(shù)僅僅在Android設備上實現(xiàn)了, 它會體現(xiàn)用戶選項里的 "設置 > 顯示 > 字體大小". 在iOS設備上它會直接返回默認的像素密度.

感興趣的同學可以打印測試下:

字體隨著系統(tǒng)字體變化

由此我們可以看出,系統(tǒng)的字體越大,PixelRatio.getFontScale()字體的縮放比越大,反之越小,fontSizeScaler的值就越小和系統(tǒng)字體成反比,才能在系統(tǒng)字體變大的情況下,軟件的字體相對變小,總體大小保持不變

2、ios 的解決方案是:

ios 上返回的默認就是像素密度,所以不起作用,需要用到text的一個屬性,這個屬性只對ios生效:

allowFontScaling={false}

這樣的話,軟件中的字體就不會隨著系統(tǒng)字體的變化而變了,但是不管在大屏7plus還是小屏5s,字體的大小都是一樣的,這樣在小屏幕手機上布局又會變化。

這樣的話我們要針對小屏幕的手機再次優(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ù)自己的實際情況自行調整,

這樣就能根據(jù)大小屏幕的手機進行適配了,

這里感謝好朋友(下一刻。)QQ:303152878的幫助


發(fā)表評論 共有條評論
用戶名: 密碼:
驗證碼: 匿名發(fā)表
主站蜘蛛池模板: 寿光市| 梅河口市| 金湖县| 霍州市| 河曲县| 京山县| 宜兰县| 霞浦县| 东阿县| 五华县| 古丈县| 高要市| 武城县| 泰来县| 喀什市| 哈巴河县| 丰城市| 两当县| 马鞍山市| 景东| 高青县| 钟祥市| 庆云县| 武夷山市| 渝北区| 巴楚县| 雷山县| 翁源县| 英德市| 嵊泗县| 汶上县| 公主岭市| 车致| 昌都县| 鹤岗市| 聊城市| 栾川县| 鹤岗市| 凉城县| 维西| 康定县|