ReactNative Text最后一位被截断

今天同事碰到一个神奇的问题:一加手机上,显示日期的Text组件,最后一位被截断没有显示。他说是Text的样式设置了fontWeight: "400" 导致的。。。

oneplus-text-cutoff

我下意识觉得可能是给Text指定的空间不足导致的,就调试了下,发现空间绰绰有余,最后一位数字就是生生被cut off了,而且在其他手机上没发现有这个问题。

Text样式如下:

dateText: {
  fontSize: 15,
  fontWeight: "400",
},

解决方法

  1. 拿掉fontWeight: "400" 样式,本来在android上也没啥效果
  2. 不拿掉fontWeight,增加 fontFamily: "System" 样式
dateText: {
  fontSize: 15,
  fontWeight: "400",
  fontFamily: "System",
},

参考:

https://stackoverflow.com/questions/54750503/text-is-getting-cut-off-in-android-for-react-native
https://github.com/facebook/react-native/issues/15114