关于android:一文解决RN058部分安卓手机text显示不全问题

48次阅读

共计 1304 个字符,预计需要花费 4 分钟才能阅读完成。

最近我的项目开发中遇到一个 Android 的适配问题,共事的红米手机 K20pro 上我的项目 App 中局部页面上的文本显示不全,比方上面这样

共事的手机降级到了最新的 miui12, 默认的手机字体是小米兰亭 pro, 正好我这边有个小米 8 的测试机,前两天也降级到了最新的 MIUI12 零碎,同样的页面在小米 8 上显示失常。
遇到这种问题的确让人头大,怎么办?搞呗。
在 GitHub 上 react-native 我的项目中搜寻相干问题,上面是就是对相干问题的探讨 issues, 感兴趣的敌人能够去看看。Github 相干问题:issues,发现不只是局部小米手机会呈现此问题,局部 oppo,one plus, lG, 三星及 google 手机上也会呈现相似问题。

解决方案:

1. 文字开端增加空格

Example: {empIDText + " "}

before it was like: {empIDText}

2. 设置 text 组件的 fontFamily

<Text style={{fontFamily: ""}}>

3. 设置 text 组件的 textBreakStrategy

无关 textBreakStrategy 的 (‘simple’, ‘highQuality’, ‘balanced’) 的不同之处,能够参考 stack overflow 上的问题:What is the difference between simple, highQuality, balanced for textBreakStrategy property in React Native?

<Text key={node.key} textBreakStrategy="simple">{node.content}</Text>

4. 全局设置 text 组件的 fontFamily

import React, {Component} from 'react';
import {View, Platform, Text} from 'react-native';

const defaultFontFamily = {
    ...Platform.select({android: { fontFamily: ''}
    })
};

const oldRender = Text.render;
Text.render = function(...args) {const origin = oldRender.call(this, ...args);
    return React.cloneElement(origin, {style: [defaultFontFamily, origin.props.style]
    });
};

通过改写笼罩 Text 组件 的 render,实现批改字体全局配置,代码放到入口文件,比方 app.js 外面就能够了。

这种计划会全局改掉字体,笼罩零碎默认字体,这样不会笼罩默认字体,出问题的 Text 组件也能够显示失常~

总结,前 3 中计划须要在每个出问题的 Text 组件设置,如果比拟多,就不是很灵便,也比拟繁琐;第 3 中计划就能够一劳永逸的解决这个问题了。

感觉文章不错的,给我点个赞哇,关注一下呗!

技术交换可关注微信公众号【君伟说】,加我好友一起探讨

VX 交换群:wayne214(备注技术交换)邀你入群,抱团学习共提高

正文完
 0