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 组件也可以显示正常~