相信和我一样使用react-native开发app的朋友,都会遇到很多兼容问题。那么大家有没有遇到过小米10手机上<Text></Text>组件中的文字 显示不全(结尾的文字 不显示)的问题。这个问题困扰了我整整一个多月,也召集过组内人员进行头脑风暴,大家绞尽脑汁、上各大搜索引擎,技术论坛“求教”,最终终于在Stack Overflow找到了答案。

废话少说,直接上干货。

有两种方式可以解决此问题:

第一种:(不推荐)

这是一种笨办法,就是每个<Text>测试 </Text>中的文字后面多追加一个空格,来填补显示不全的位置。

此方法虽然可以解决问题,但却比较繁琐,同时,不利于维护。

第二种:(推荐)

在react-native的入口页app.js顶部增加配置如下:

const oldRender = Text.render;
Text.render = function (...args) {
  const origin = oldRender.call(this, ...args);
  return React.cloneElement(origin, {
    style: [defaultFontFamily, origin.props.style],
  });
};

即可完美,永久的解决问题。

当然,此方法不仅仅适用于小米10,其他类似问题亦可用此方法解决。

到此,是不是已经解决了您的问题了呢?!

如果解决了您的问题,请给我一个大拇指!!

Logo

为开发者提供学习成长、分享交流、生态实践、资源工具等服务,帮助开发者快速成长。

更多推荐