一文解决RN0.58部分安卓手机text显示不全问题 |
您所在的位置:网站首页 › 手机qq字显示不全 › 一文解决RN0.58部分安卓手机text显示不全问题 |
最近项目开发中遇到一个Android的适配问题,同事的红米手机K20pro上项目App中部分页面上的文本显示不全,比如下面这样 同事的手机升级到了最新的miui12, 默认的手机字体是小米兰亭pro,正好我这边有个小米8的测试机,前两天也升级到了最新的MIUI12系统,同样的页面在小米8上显示正常。 遇到这种问题确实让人头大,怎么办?搞呗。 在GitHub上react-native项目中搜索相关问题,下面是就是对相关问题的讨论issues,感兴趣的朋友可以去看看。Github相关问题:[issues](https://github.com/facebook/react-native/issues/15114),发现不只是部分小米手机会出现此问题, 部分oppo,one plus, lG, 三星及google手机上也会出现类似问题。 解决方案:1.文字末尾添加空格 ``` Example: {empIDText + " "} before it was like: {empIDText} ``` 2.设置text组件的fontFamily ``` ``` 3. 设置text组件的textBreakStrategy 有关textBreakStrategy的('simple', 'highQuality', 'balanced')的不同之处,可以参考stack overflow上的问题:[What is the difference between simple, highQuality, balanced for textBreakStrategy property in React Native?](https://stackoverflow.com/questions/53236569/what-is-the-difference-between-simple-highquality-balanced-for-textbreakstrate) ``` {node.content} ``` 4.全局设置text组件的fontFamily import React, { Component } from 'react'; import { View, Platform, Text } from 'react-native'; const defaultFontFamily = { ...Platform.select({ android: { fontFamily: '' } }) }; const oldRender = Text.render; Text.render = function(...args) { const origin = oldRender.call(this, ...args); return React.cloneElement(origin, { style: [defaultFontFamily, origin.props.style] }); }; 通过改写覆盖 Text 组件 的 render,实现修改字体全局配置,代码放到入口文件,比如 app.js 里面就可以了。 这种方案会全局改掉字体,覆盖系统默认字体,这样不会覆盖默认字体,出问题的 Text 组件也可以显示正常~ 总结,前3中方案需要在每个出问题的 Text 组件设置,如果比较多,就不是很灵活,也比较繁琐;第4中方案就可以一劳永逸的解决这个问题了。 觉得文章不错的,给我点个赞哇,关注一下呗! 技术交流可关注公众号【君伟说】,加我好友一起探讨 VX交流群:wayne214(备注技术交流)邀你入群,抱团学习共进步 |
今日新闻 |
推荐新闻 |
CopyRight 2018-2019 办公设备维修网 版权所有 豫ICP备15022753号-3 |