React Native 字体适配解决方法

【注】该方法仅对RN0.50版本以后。

曾经有一个问题一直没有解决，当 <Text>设置好字号以后，一些客户手机系统的字体更改大小，这时候，RN APP里面字体也随之变化

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

系统最小号字体

Simulator Screen Shot - iPhone 6 - 2018-02-27 at 15.51.12.png
系统最大号字体

这种情况就让程序猿苦恼了

下面介绍解决方法

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'
  }
});

关键就在这

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

直接看效果吧

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

字号已经不在跟随系统变化了