1、根据屏幕宽度比例适配
定义ratio_w = Dimensions.get('window').width / 375(按着750x1334出设计稿)
所有字体大小定义 * ratio_w进行适配。
2、字体大小不随着系统字体大小变化
2.1 设置Text/TextInput组件的 allowFontScaling = false 属性
2.2 封装自定义CustomText/CustomTextInput组件,render 返回Text/TextInput组件,属性添加 allowFontScaling=false,所有使用到相关组件时,直接引用CustomText/CustomTextInput来代替
2.3 Text的render方法,不适用TextInput组件
react native 0.56之前版本,这样实现
Text.prototype.render = _.wrap(Text.prototype.render, function (func, ...args) {
let origin = func.apply(this, args)
return React.cloneElement(origin, {allowFontScaling: false})
})
react native 0.56版本及以后版本,如此实现
Text.render = _.wrap(Text.render, function (func, ...args) {
let origin = func.apply(this, args)
return React.cloneElement(origin, {allowFontScaling: false})
})
2.4 通过defaultProps来设置
TextInput.defaultProps = Object.assign({}, TextInput.defaultProps, {defaultProps: false})
Text.defaultProps = Object.assign({}, Text.defaultProps, {allowFontScaling: false})