React Native Text 组件显示不全解决方案

你的名字 2022-03-22 01:51 917阅读 0赞

> github上此问题的讨论 [传送门][Link 1]

### BUG 体现效果(左出问题安卓真机，右ios模拟器) ###

> 设置 minWidth 无法自动撑开 View，除非 minWidth 设置得大些

![20190125114223814.png][]![在这里插入图片描述][20190125114247678.png]

![在这里插入图片描述][20190125114314829.png]![在这里插入图片描述][20190125114324526.png]

### 发生场景 ###

这个解决方法不一定能够解决所有的问题，有必要说下我遇到的场景。

*  发生在某些安卓机上，比如我的OnePlus而在另外的手机上又是正常的
 *  在 ios 上 ok
 *  在设置 `fontWeight` 字体粗细后产生的问题
 *  设置某些特定 `fontFamily` 可以解决问题

经过几番调试，基本可以确定应该是在没有设置 fontFamily 时，使用手机的默认字体，然后更改 fontWeight 后，字体显示的bug

### 解决方案 ###

#### 1. 给外部 View 设置宽度 ####

给 View 设置固定宽度，可以将隐藏的字体展示出来

不过在许多情况下都不能确定内部字体的长度，希望可以自适应，此种方案适用性不高

#### 2. 设置 font-family ####

给出现问题的 Text 组件，设置 `fontFamily`

这种方案适用性还是可以的，不过需要在每个出问题的 Text 组件设置还是稍显麻烦，如果能够全局设置一下就好了

#### 3. 全局设置 fontFamily ####

> [解决方案][Link 2]

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

[Link 1]: https://github.com/facebook/react-native/issues/15114
[20190125114223814.png]: https://img-blog.csdnimg.cn/20190125114223814.png
[20190125114247678.png]: https://img-blog.csdnimg.cn/20190125114247678.png
[20190125114314829.png]: https://img-blog.csdnimg.cn/20190125114314829.png
[20190125114324526.png]: /images/20220322/7c710a053a5a4c51927b432af310bdd6.png
[Link 2]: https://github.com/facebook/react-native/issues/15114#issuecomment-341988546