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

React Native Text 组件显示不全解决方案相关推荐

React Native TEXT 组件文字显示不全异常解决（小米文字显示不全：小米10 ,Redmi k30出现）
开发中发现一处text组件显示文字,总是丢末尾几个字符的异常.就很疑惑,拿小米11ultra(12.0.9)和小米8(12.0.3)测试正常,小米10(miui12.0.11)和redmi k30会 ...
React Native－6.React Native Text组件，多组件封装实战之凤凰资讯页面
现来个图:没图说个xx 先来分析怎么做一个导航栏一个列表一个摘要列表大体可以分为上中下三个模块,那么我们从上到下一次封装. 我们来搞出些事情创建.js文件,一个组件一个.js文件我们通过命 ...
JScrollPane中添加组件时滚动条不出现或添加组件显示不全解决方案
问题: 往滚动条容器里添加容器,再往容器中添加组件,当组件的大小超过滚动条的大小时,滚动条还不显现的解决办法.滚动条容器,在NEW的时候只能传一个容器进去.并且这个容器(zPanel)不需要设置大小. ...
React-Native 踩坑------MIUI12“Text“组件显示异常
React-Native 踩坑------MIUI12"Text"组件显示异常我尽量不打错别字,用词准确,不造成阅读障碍最近发现React-Native的应用在MIUI12上 ...
移动跨平台框架React Native状态栏组件StatusBar【16】
前端江太公 React Native,是一个混合移动应用开发框架,是目前流行的跨平台移动应用开发框架之一.React Native 采用不同的方法进行混合移动应用开发.它不会生成原生 UI 组件,而是 ...
GitChat · 移动开发 | 征服React Native—列表组件
GitChat 作者:Li Luo 原文:征服React Native-列表组件关注公众号:GitChat 技术杂谈,一本正经的讲技术前言移动应用往往受限于屏幕大小,而数据内容长度的不确定性,在 ...
React Native 下载组件以及npm常用命令
一.React Native 下载组件: RN的组件都是需要从网上下载的.正常来说,我们通过npm start打开服务器之后,直接用npm下载即可.常用的组件,例如按钮,滚动等,都是可以直接下载的.下 ...
Android之React Native 中组件的生命周期
React Native 中组件的生命周期概述就像 Android 开发中的 View 一样,React Native(RN) 中的组件也有生命周期(Lifecycle).所谓生命周期,就是一个对 ...
React Native常用组件之ListView
1. ListView常用属性 ScrollView 相关属性样式全部继承 dataSource ListViewDataSource 设置ListView的数据源 initialListSize n ...

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

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

发生场景

解决方案

1. 给外部 View 设置宽度

2. 设置 font-family

3. 全局设置 fontFamily

React Native Text 组件显示不全解决方案相关推荐

最新文章

热门文章