React Native 字體適配解決方法

【注】該方法僅對RN0.50版本以后。

曾經(jīng)有一個問題一直沒有解決，當 <Text>設(shè)置好字號以后，一些客戶手機系統(tǒng)的字體更改大小，這時候，RN APP里面字體也隨之變化


Simulator Screen Shot - iPhone 6 - 2018-02-27 at 15.50.45.png

系統(tǒng)最小號字體


Simulator Screen Shot - iPhone 6 - 2018-02-27 at 15.51.12.png

系統(tǒng)最大號字體

這種情況就讓程序猿苦惱了

下面介紹解決方法

import {
    Platform,
    StyleSheet,
    Text,
    View,
    SafeAreaView,
    DeviceInfo,
    Button,
} from 'react-native';


const styles = StyleSheet.create({
  container: {
    flex: 1,
    //justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#F5FCFF',
    flexDirection: 'column',
    justifyContent: 'space-between',
  },
  welcome: {
    fontSize: 20*(1.0/DeviceInfo.Dimensions.screen.fontScale),
    textAlign: 'center',
    margin: 10,
  },
  instructions: {
    textAlign: 'center',
    color: '#333333',
    marginBottom: 5,
    fontSize:20,
  },
  bottom: {
    //justifyContent: 'flex-end',
    alignItems: 'flex-end'
  }
});

關(guān)鍵就在這

 fontSize: 20*(1.0/DeviceInfo.Dimensions.screen.fontScale)

直接看效果吧


Simulator Screen Shot - iPhone 6 - 2018-02-27 at 15.56.19.png

字號已經(jīng)不在跟隨系統(tǒng)變化了

?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成，瀏覽時請結(jié)合常識與多方信息審慎甄別。
平臺聲明：文章內(nèi)容（如有圖片或視頻亦包括在內(nèi)）由作者上傳并發(fā)布，文章內(nèi)容僅代表作者本人觀點，簡書系信息發(fā)布平臺，僅提供信息存儲服務。

相關(guān)閱讀更多精彩內(nèi)容

友情鏈接更多精彩內(nèi)容