React Native Text 組件顯示不全解決方案

github上此問題的討論 傳送門

BUG 體現效果(左出問題安卓真機，右ios模擬器)

設置 minWidth 無法自動撐開 View，除非 minWidth 設置得大些

發生場景

這個解決方法不一定能夠解決所有的問題，有必要說下我遇到的場景。

• 發生在某些安卓機上，比如我的OnePlus而在另外的手機上又是正常的
• 在 ios 上 ok
• 在設置 fontWeight 字體粗細後產生的問題
• 設置某些特定 fontFamily 可以解決問題

經過幾番調試，基本可以確定應該是在沒有設置 fontFamily 時，使用手機的默認字體，然後更改 fontWeight 後，字體顯示的bug

解決方案

1. 給外部 View 設置寬度

給 View 設置固定寬度，可以將隱藏的字體展示出來

不過在許多情況下都不能確定內部字體的長度，希望可以自適應，此種方案適用性不高

2. 設置 font-family

給出現問題的 Text 組件，設置 fontFamily

這種方案適用性還是可以的，不過需要在每個出問題的 Text 組件設置還是稍顯麻煩，如果能夠全局設置一下就好了

3. 全局設置 fontFamily

解決方案

import React from 'react';
import { StyleSheet, Text } from 'react-native';`

const styles = StyleSheet.create({
    defaultFontFamily: {
        fontFamily: 'lucida grande',    // 可以試試 fontFamily: '',
    }
});

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

通過改寫覆蓋 Text 組件 的 render，實現修改字體全局配置，代碼放到入口文件，比如 app.js 裏面就可以了

此外，這種方案會全局改掉字體，覆蓋系統默認字體，可以試試改成 fontFamily: ''，這樣不會覆蓋默認字體，出問題的 Text 組件也可以顯示正常~