react native 系统设置更大字体导致项目字体变大的坑

禁用React Native字体缩放

最新推荐文章于 2025-06-11 16:09:49 发布

转载最新推荐文章于 2025-06-11 16:09:49 发布 · 798 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：https://my.oschina.net/caiyue/blog/1836373

文章标签：

#javascript #移动开发 #ViewUI

本文介绍了一种方法来防止React Native应用中的字体大小受到系统设置的影响。通过重写Text组件的render方法并设置allowFontScaling为false，可以确保应用内的文字显示不受外部设置干扰。

部署运行你感兴趣的模型镜像

最近react native 项目遇到当改变手机的系统字体大小，项目的字体大小也会跟着影响，为了使项目字体大小不受系统设置的字体大小影响，想出了以下办法，allowFontScaling:false 禁止字体缩放
import React from 'react'
import {
    Text,
    TextInput

} from 'react-native'

import {Input} from 'teaset'
 
var render = Text.prototype.render

// 重写render方法
Text.prototype.render = function() {
    let text = render.apply(this, arguments);
    return React.cloneElement(text, {
        allowFontScaling: false
    })
}
 // 解决TextINput的 placeholder的字体会跟着系统设置变化
Input.defaultProps.allowFontScaling = false;

转载于:https://my.oschina.net/caiyue/blog/1836373

您可能感兴趣的与本文相关的镜像