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

最新推荐文章于 2023-11-30 19:33:21 发布
最新推荐文章于 2023-11-30 19:33:21 发布
阅读量9.2k 收藏 2
点赞数 2
分类专栏： React Native Bug解决 文章标签： js React Native Text组件 显示不全 fontWeight
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/zwkkkk1/article/details/86642529
版权
在某些安卓设备上，React Native的Text组件会出现显示不全的问题，尤其是在增加fontWeight后。解决方法包括：1) 给外部View设置宽度；2) 为Text组件指定font-family；3) 全局设置fontFamily。通过覆盖Text组件的render方法，可以在app.js中全局修改字体配置，避免影响默认字体。
摘要由CSDN通过智能技术生成

github上此问题的讨论 传送门

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

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

在这里插入图片描述

在这里插入图片描述在这里插入图片描述

发生场景

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

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

经过几番调试，基本可以确定应该是在没有设置 fontFamily

最低0.47元/天 解锁文章
zwkkkk1
关注
专栏目录
react-native 记录问题：当2个text并列显示，第二个text 实际宽度出现超出了父元素宽度（RN0.59）
u014012083的专栏
11-18 1956
当2个text并列显示，第二个text 实际宽度出现超出了父元素宽度 <View style={style.honorContainer}> <Text style={style.honorText}>主要课程：</Text> <Text style={[style.honorText,style.honorText...
React-native Text文字展示不完需要将剩下的部分使用省略号...来处理
qq_42208442的博客
06-22 1531
有些时候我们固定了展示文字的View的大小， 但是里面的文字太长展示不完的时候就会将剩余的部分截掉（覆盖掉看不见）。这个时候， 为了用户友好， 可以将展示不下的部分使用省略号代替。 我这里的例子是在app的顶部展示一段 "welcome back， XXX"的文字。 因为在顶部， 我们需要固定高度， 且最多只能展示两行字。 可以看到， 下图中红色圈的部分文字就被截掉了 ![在这里插入图片描述](https://img-blog.csdnimg.cn/2021062218001810.png 这个时候就可以使
react-native 安卓手机Text组件文字显示不全问题
在下月亮有何贵干
12-07 3332
react-native 低版本与安卓部分手机存在兼容问题，Text组件文字内容显示不全。
【React-Native】- 红米/安卓手机Text文字显示不全及全局字体
Li-的博客
05-23 2280
文章目录前言方案一：更换手机字体方案二：重新封装Text组件方案三：覆盖Text组件的render方法 前言 提示：这里可以添加本文要记录的大概内容： 由于Android 手机厂商很多，不像 iPhone 只有一家公司，默认字体是不统一的。这时候如果组件没有设置字体，就会使用手机的默认字体。而有些字体，比如 “OnePlus Slate”、“小米兰亭pro” 在使用 Text 组件渲染的时候，就会出现被遮挡的问题 提示：以下是本篇文章正文内容，下面案例可供参考 方案一：更换手机字体 方便快捷，但可控制
react native 中ScrollView 滚动显示不全问题
三七二十一的博客
06-01 6851
使用ScrollView的时候,遇到一个问题,里面的内容靠下的部分需要用力拉才能看见,一松开又弹回去了(原谅我拙劣的叙述,不知道用什么样的专业术语) 看了官网的解释才知道原因: ScrollView 的功能就是把其包含的不确定高度的内容通过滚动操作在一个固定高度的窗口显示,所以 ScrollView必须有一个确定的高度才能正常工作!!! 要给一个ScrollView确定一个高度的话，要...
TextView 内容过多,显示不全时,实现带滚动条,上下滑动
热门推荐
shanshan_1117的博客
12-18 2万+
当textview显示一大段文字时，不能再指定高度显示时，需要上下滑动来查看剩余文字。 在xml文件中<TextView android:id="@+id/tv_title" android:layout_width="match_parent" android:layout_height="200dp" android:padding="15px" and
react-native-rapi-ui:React Native组件库
03-25
2. **导航组件**：导航是移动应用中至关重要的部分，Rapi UI 提供了如`StackNavigator`、`TabNavigator`和`DrawerNavigator`等导航解决方案，帮助开发者实现页面间的跳转和切换，确保用户在应用中的流畅体验。...
redux-react-native-i18n：用于Redux上的React Native应用程序的i18n解决方案
02-04
具有复数形式的i18n解决方案支持Redux上的React Native应用程序。 这个包提供了到React Native的功能。 这个包和之间的区别在于表示组件及其容器。 此软件包中的使用'react-native' <Text>而不是<span> 。 这个包...
react-native 解决ios中部分版本不能输入中文
01-04
### React Native iOS 中文输入问题解析与解决方案 #### 背景介绍 在React Native开发过程中，遇到iOS设备上部分版本无法输入中文的情况时有发生。这类问题往往给开发者带来不小的困扰，尤其是在需要用户进行中文...
ReactNative虚线组件兼容Android
08-11
总之，rn-dashline组件是React Native开发者在Android平台上实现虚线效果的一个解决方案，它简化了原本需要手动处理的平台差异，提升了开发效率。通过理解和掌握这个组件，你可以更轻松地创建具有专业视觉效果的混合...
React Native TEXT 组件文字显示不全 异常解决（小米文字显示不全：小米10 ,Redmi k30出现）
loveseal518的博客
04-21 2387
开发中发现一处text组件 显示文字，总是丢末尾几个字符的异常。就很疑惑，拿小米11ultra(12.0.9)和小米8(12.0.3)测试正常，小米10（miui12.0.11）和redmi k30会异常。 字体都是如下图这个小米兰亭pro。 解决方法： 全局设置如下代码（记得import Platform跟Text） const defaultFontFamily = { ...Platform.select({ android: {fontFamily: ''}...
React Native 之 Text的使用
汪飞的博客
03-03 552
前言 学习本系列内容需要具备一定 HTML 开发基础，没有基础的朋友可以先转至 HTML快速入门(一) 学习 本人接触 React Native 时间并不是特别长，所以对其中的内容和性质了解可能会有所偏差，在学习中如果有错会及时修改内容，也欢迎万能的朋友们批评指出，谢谢 文章第一版出自简书，如果出现图片或页面显示问题，烦请转至 简书 查看 也希望喜欢的朋友可以点赞，谢谢
React-Native Text组件重新渲染时会文字超出屏幕的问题
-霄-的博客
11-07 3461
React-Native Text组件重新渲染时会文字超出屏幕的问题 今天在开发中碰到一个很奇怪的问题就是初次渲染的时候Text组件里的文字会正常换行，一切看起来都很和谐，但是当我滚动scrollview引起重新渲染的时候，灵异事件发生了，这个Text里本来的两行文字，却诡异的变成了一行，超出了屏幕。在上网搜了很久无果的情况下，自己去排查发现是“fontFamily”属性设的平方字体的问题，我把f...
React-Native 踩坑------MIUI12“Text“组件显示异常
SurpassLi的博客
07-16 2221
React-Native 踩坑------MIUI12"Text"组件显示异常 我尽量不打错别字，用词准确，不造成阅读障碍 最近发现React-Native的应用在MIUI12上 <Text 组件显示数字不全，少了个0，自适应宽度\高度不够，查阅资料，github上有人说，发现在Android P、Android Q上可能会有这个问题，但是我只遇到在MIUI12上有这个问题的，我自己是Android Q(10)—MIUI11，没有这个问题；后来还查阅到有人发现在Android P和Android
部分手机RN—Text组件不能显示完全的问题
最新发布
weixin_50648325的博客
11-30 528
【代码】部分手机RN—Text组件不能显示完全的问题。
react项目中在线预览附件
卡卡罗特的博客
05-12 2468
这几天在做一些管理后台的公共模块，其中遇到了附件下载，在线预览的功能 这里发现了一个很好的在线预览插件react-file-viewer（自己到npm去搜就好了）npm install --savereact-file-viewer Supported file formats: Images: png, jpeg, gif, bmp, including 360-degree images pdf csv xslx docx Video: mp4, webm Audio: m...
【React】实现日志查看以下载.txt文件形式展示
all_might1的博客
11-26 1363
一、前言 还记得11.18日才寤寐思服地写出来日志以弹窗形式实时展示 昨天下午让做成其他样式，主要是因为有些日志过大，对其产生的压力太大，老是挂掉 于是决定做成点击下载，将全量日志下载到本地 二、前提条件 后端以二进制流将日志内容传输过来 三、解决思路 其实改成这样实际上变得简单了不少，经过路径也会少很多 1、触发点击事件取得入参 在a标签触发点击事件后调用downloadFullLog，因为antd的table中每行数据都存储在record中，从中取出...
react native实现可展开Text控件
滴水可以穿石 百炼才能成钢，谋全局而通一域 致广大而尽精微
01-06 2121
转载:http://blog.csdn.net/jan8705_/article/details/52279533 原理：组件初始化时不设置Text控件的numberOfLines属性，测量一下组件高度（最大高度），然后在设置numberOfLines属性，再次测量一下组件高度（最小高度），若最大高度大与最小高度，表示需要显示“展开”。 [plain] view plain
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值