前言
提示:这里可以添加本文要记录的大概内容:
由于Android 手机厂商很多,不像 iPhone 只有一家公司,默认字体是不统一的。这时候如果组件没有设置字体,就会使用手机的默认字体。而有些字体,比如 “OnePlus Slate”、“小米兰亭pro” 在使用 Text 组件渲染的时候,就会出现被遮挡的问题
提示:以下是本篇文章正文内容,下面案例可供参考
方案一:更换手机字体
方便快捷,但可控制性低,不能要求每个客户都去执行
方案二:重新封装Text组件
封装 Text 组件,针对 Android 系统设置默认字体,但如果是老项目,对已有的Text组件一个个去更换,工作量大
方案三:覆盖Text组件的render方法
//utils.js
import {isAndroid} from '@/utils/device';
import {Text} from 'react-native';
export const setCustomText = () => {
const TextRender = Text.render;
let customStyle = {};
if (isAndroid()) customStyle = {
fontFamily: '',
//fontFamily: 'lucida grande',
};
//更改组件样式
Text.render = function render(props) {
let oldProps = props;
props = {...props, style: [customStyle, props.style]};
try {
return TextRender.apply(this, arguments);
} finally {
props = oldProps;
}
};
//更改组件属性
Text.defaultProps = Object.assign({}, Text.defaultProps, {
maxFontSizeMultiplier: 1.15,
textBreakStrategy: 'simple'
});
};
//app.js
import {setCustomText} from '@/utils/util';
setCustomText();
const App = ()=>{
...
}