React native 字体大小适配

最新推荐文章于 2025-02-03 07:27:42 发布

原创最新推荐文章于 2025-02-03 07:27:42 发布 · 2.3k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#react native

react native text 专栏收录该内容

0 篇文章

订阅专栏

本文介绍了如何在React Native中进行字体大小适配，包括基于屏幕宽度的比例适配以及防止字体大小随系统字体大小变化的方法，如设置allowFontScaling属性为false，并提供不同版本React Native的实现细节。

1、根据屏幕宽度比例适配

定义ratio_w = Dimensions.get('window').width / 375(按着750x1334出设计稿)

所有字体大小定义 * ratio_w进行适配。

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