欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

React-Native 踩坑------MIUI12“Text“组件显示异常

程序员文章站 2022-07-02 21:49:27
...

React-Native 踩坑------MIUI12"Text"组件显示异常

我尽量不打错别字,用词准确,不造成阅读障碍

最近发现React-Native的应用在MIUI12上 <Text 组件显示数字不全,少了个0,自适应宽度\高度不够,查阅资料,github上有人说,发现在Android P、Android Q上可能会有这个问题,但是我只遇到在MIUI12上有这个问题的,我自己是Android Q(10)—MIUI11,没有这个问题;后来还查阅到有人发现在Android P和Android Q上,Text显示长文本会显示不全,这个和我的问题还不一样,人家也给了解决方案,下面列出来了;

后来知道,原来是MIUI默认的小米兰亭Pro字体在RN上的显示是有问题的,换了一个字体就没事了;现总结网上所有给予的方案:

1.更改手机字体,不用小米兰亭Pro,不过控制不了用户用什么字体,可操作性太低;
2.代码指定<Text字体,例:fontFamily:“Vani”,或修改全局字体

————以下为解决长文本显示不全问题方案(可以尝试解决数字显示问题)-----------------

3.设置<Text的textBreakStrategy=‘simple’;我试了一下,发现没用,但我是0.58.x,作者是0.59.x,也有人说有用,可以试试;
4.设置行高
<Text style={{fontSize:16, lineHeight:16 * 1.5}}></Text>

一般是乘1.5,你看着来,虽然我试了,对于数字显示问题,没有用,还不如指定宽度呢

当然你可以封装一个Text 组件,不过对于老项目来说就很难了,一个个替换吗?

5.修改源码

node_modules/react-native/ReactAndroid/src/main/java/com/facebook/react/views/text/ReactTextShadowNode.java

React-Native 踩坑------MIUI12“Text“组件显示异常

但是修改完源码后要构建源码,对于iOS来比较简单,但对于Android来说要复杂很多很多,还有翻车的危险,所以一般不建议修改,当然,有经验者忽略;
友情附上构建源码链接:
从源代码编译React Native
一篇帮助文章:React Native 源码构建
只能帮到这了
RN开发团队似乎在0.61.x版本对这个问题做了修复,可以看看;