如何渲染多行文本组件,行之间有白色间隙

Question

我试图在React Native中复制以下内容,这是一个文本组件,行间有白色间隙.

span {
  background: rgba(255, 235, 0);
  line-height: 1.5;
}

<span>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc at condimentum leo. Suspendisse potenti. Praesent ut lorem ac tortor auctor laoreet. Fusce egestas orci quis dui egestas, ac malesuada lacus feugiat. Etiam at augue vel nisl luctus dignissim. Sed iaculis nec metus vitae interdum. Vivamus tincidunt fermentum ligula, eu tincidunt orci sodales at. Ut tristique velit erat, sed malesuada sapien ornare sit amet. Nunc congue imperdiet sapien in feugiat. Aenean id ipsum quis lorem rhoncus fermentum. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Donec ornare, risus in dictum dignissim, dui libero blandit velit, a fringilla ligula lacus quis purus. Vivamus ullamcorper lorem vel velit dignissim lacinia. Vestibulum pulvinar leo eget magna lacinia, sit amet porttitor risus cursus. Integer nec tincidunt orci. Proin maximus viverra arcu, sit amet bibendum diam sagittis ut.</span>

将上述相同的CSS添加到Text组件不会输出与上面的代码段相同的内容.

Answer 1

目前,React Native没有开箱即用的这种样式.CSS line-height属性不等同于lineHeightRN的样式支柱.

让我们来看看iOS,例如:

lineHeight映射到控制最小/最大行高的段落样式对象的属性,然后将其应用于文本.此线条高度是整个片段高度,因此此处应用的任何背景颜色都将为整条线条着色.

调用本机段落对象的另一个属性,在lineSpacing计算行高后添加该属性.此属性实际上可以控制空间并实现您所追求的精确效果.不幸的是,RN并没有让您控制这个属性.

因此,您可以找到提供此类功能的包,也可以尝试自己实现本机解决方案.