一文解决RN0.58部分安卓手机text显示不全问题

最近项目开发中遇到一个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（备注技术交流）邀你入群，抱团学习共进步