React native 字体大小适配

关注

原创最新推荐文章于 2026-07-21 07:41:59 发布 2.4k 阅读 AI 写同款· GEO 优化 ›

React Native 字体大小不随系统字体大小变化在开发react-native App时，相信大家都遇到过这样的问题：用户设置了系统的字体大小之后，导致自己的 App 布局紊乱，甚至有些内容会被切掉/隐藏，这对于用户来讲，是非常不好的使用体验。为什么会出现这种情况呢？其实，我们在开发的时候，布局的前提是系统的字体大小设置为默认大小，所以只能保证在系统字体大小正常的情况下，我们的布局是友好的。那么，我们应该如何解决这个问题呢？今天这篇文章，就给大家介绍几种解决方案。阅读详情

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

收录于