Как визуализировать многострочный текстовый компонент с белым промежутком между линиями

Я пытаюсь воспроизвести следующее в 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>

Ответы

Ответ 1

На данный момент у React Native нет такого стиля оформления. CSS line-height свойство не эквивалентно lineHeight стиля подпорка RN.

Давайте взглянем на iOS, например:

lineHeight отображается на свойство aa объекта стиля абзаца, который управляет высотой линии min/max, которая затем применяется к вашему тексту. Эта высота линии - это высота всего фрагмента, поэтому любой цвет фона, используемый здесь, будет окрашивать всю линию.

Существует еще одно свойство объекта родного абзаца, называемого lineSpacing который добавляется после вычисления высоты строки. Это свойство может фактически контролировать пространство и достигнет точного эффекта, которым вы пользуетесь. К сожалению, RN не дает вам контроля над этим свойством.

Таким образом, вы можете найти пакет, который обеспечивает такую функциональность, или попытаться самостоятельно реализовать собственное решение.

Ответ 2

Text не будет вести себя как span. Вы можете сделать взлом для этого. Используйте response-native-highlight-words lib и передайте весь текст как searchWords первого элемента searchWords.

Ответ 3

Вы можете использовать lineHeight вместо line-height в реакции native. Если вы хотите изменить цвет разрыва. этот хак, установите цвет фона белый для Text.

Ответ 4

Мне кажется, вам нужен text для display: inline

Ответ 5

Используйте flexWrap: "wrap" и lineHeight

<View key={1} style={{ flex: 1, alignItems: 'flex-start', }}>
    <Text style={[styles.fonts_12_light_slate, { 
      flexWrap: 'wrap', lineHeight: 18, textAlign: 'left' }]}>
      LOREM IPSUM LOREM IPSUM LOREM IPSUM LOREM IPSUM LOREM IPSUM         LOREM IPSUM LOREM IPSUM LOREM IPSUM LOREM IPSUM LOREM IPSUM
    </Text>
</View>