1. 程式人生 > >React Native 字型不隨系統字型變化而變

React Native 字型不隨系統字型變化而變

最近遇到了一個問題,rn寫的軟體內的字型(text元件)會隨著手機系統字型大小的變化而變,也就是說當你把手機系統的顯示-字型調到最大號,開啟軟體,text的字型會變得非常大,佈局就亂了。http://blog.csdn.net/liu__520/article/details/54969502

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

1、android 的解決方案是:

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

fontSize:18*fontSizeScaler

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

    get() 返回裝置的畫素密度,

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

如果沒有設定字型大小, 它會直接返回裝置的畫素密度.

目前這個函式僅僅在Android裝置上實現了, 它會體現使用者選項裡的 "設定 > 顯示 > 字型大小". 在iOS裝置上它會直接返回預設的畫素密度.

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


字型隨著系統字型變化

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

2、ios 的解決方案是:

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

allowFontScaling={false}

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

這樣的話我們要針對小螢幕的手機再次優化,判斷畫素比。

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;

}

裡面的比值大家根據自己的實際情況自行調整,

這樣就能根據大小螢幕的手機進行適配了,