关于RN lineHeight的一些问题

当使用Text组件时,难免会使用lineHeight这个样式,但是在ios端,当中文和英文数字混排的时候,字符不在同一个基线上,效果如下:

这是加行高的:


关于RN lineHeight的一些问题_第1张图片
加行高

这是不加行高的:


关于RN lineHeight的一些问题_第2张图片
不加行高

是不是觉得加了行高的丑的不行。

其实这是RN的一个bug,据说解决这个bug已经提上日程了。但是当前,至少在0.55.4版本还是需要我们手动解决的。

如何解决呢?

经过多方查找,其实解决方法很简单,只要在style里加一句话就好了:

fontFamily: 'PingFangSC-Regular'

是的,你没看错,就这一句,当然你还可以有很多选择:

苹方 - 简常规体:PingFangSC-Regular 

苹方 - 简极细体:PingFangSC-Ultralight 

苹方 - 简细体:PingFangSC-Light 

苹方 - 简纤细体:PingFangSC-瘦

苹方 - 简中黑体:PingFangSC-中

苹方 - 简中体:PingFangSC-Semibold

想用哪个用哪个~

这样就可以解决在ios端因使用lineHeight而导致基线不一致的问题了!

你可能感兴趣的:(关于RN lineHeight的一些问题)