miui12上面部分app的文字显示缺失

最新推荐文章于 2024-05-30 16:06:55 发布

原创最新推荐文章于 2024-05-30 16:06:55 发布 · 5.7k 阅读

0 ·

CC 4.0 BY-SA版权

错误记载同时被 3 个专栏收录

141 篇文章

订阅专栏

前端

22 篇文章

订阅专栏

react-native

11 篇文章

订阅专栏

在MIUI12系统上，使用React-Native开发的项目出现文字显示缺失的问题，主要是由于小米兰亭Pro字体在RN中解析错误。解决方法包括：1) 在<Text>和<TextInput>组件中设定固定字体；2) 修改全局字体；3) 设置<Text>的textBreakStrategy属性；4) 调整lineHeight；5) 修改RN源码。RN团队在0.61.x版本可能已修复此问题。

我的是react-native项目

排查了很久，发现是他预设的系统字体小米兰亭Pro字体在RN上的显示是有问题的，在app内解析时计算空间失误，导致某些字被挤没了。

尤其是空格 % - 等等特殊符号在计算大小时会失误。

最后直接将app内的<Text>和<TextInput>组件默认字体写死为一个常用字体。

例：fontFamily:“icon”

或者 fontFamily:''  
比如修改node_modules\react-native\Libraries\Text\Text.js   直接给组件加
newProps = {
  ...newProps,
  style: [Platform.OS==='ios'?{}:{fontFamily:''},this.props.style]
};

也会生效

，或修改全局字体

以下是一些其他解决方案 原文链接：https://blog.youkuaiyun.com/Fly_li_sir/article/details/107396849

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
一般是乘1.5，你看着来，虽然我试了，对于数字显示问题，没有用，还不如指定宽度呢

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

5.修改源码
node_modules/react-native/ReactAndroid/src/main/java/com/facebook/react/views/text/ReactTextShadowNode.java

在这里插入图片描述

但是修改完源码后要构建源码，对于iOS来比较简单，但对于Android来说要复杂很多很多，还有翻车的危险，所以一般不建议修改，当然，有经验者忽略；
友情附上构建源码链接：
https://reactnative.cn/docs/building-from-source/
一篇帮助文章：https://codyi96.github.io/2020/02/16/react-native-build-from-source/#%E6%9E%84%E5%BB%BAaar
只能帮到这了
RN开发团队似乎在0.61.x版本对这个问题做了修复，可以看看；