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