一文解決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（備註技術交流）邀你入羣，抱團學習共進步