css - lineas - Cómo representar un componente de texto multilínea con un espacio en blanco entre líneas

salto de linea html5

Question

Estoy intentando replicar lo siguiente en React Native, un componente de texto con un espacio en blanco entre líneas.

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>

Agregar el mismo CSS anterior a un componente de Text no genera el mismo resultado que el fragmento de código anterior.

Answer 1

Creo que necesitas el text para display: inline

Answer 2

En este momento, React Native no tiene este tipo de estilo fuera de la caja. La propiedad de line-height CSS no es equivalente a la prop de estilo lineHeight de RN.

Echemos un vistazo a iOS por ejemplo:

lineHeight se asigna a una propiedad de un objeto de estilo de párrafo que controla la altura de línea mínima / máxima, que luego se aplica a su texto. Esta altura de línea es la altura del fragmento completo, por lo que cualquier color de fondo aplicado aquí coloreará toda la línea.

Hay otra propiedad del objeto de párrafo nativo llamado lineSpacing que se agrega después de que se calcula la altura de la línea. Esta propiedad puede controlar el espacio y lograría el efecto exacto que está buscando. Desafortunadamente, RN no le da control sobre esta propiedad .

Por lo tanto, puede encontrar un paquete que proporcione este tipo de funcionalidad o intentar implementar una solución nativa usted mismo.

Answer 3

Puede usar lineHeight lugar de line-height en reaccion lineHeight . Si quieres cambiar el color de la brecha. este truco, establecer el color de fondo blanco para el Text .

Answer 4

Use flexWrap: "wrap" y 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>

Answer 5

Text no se comportará como un span . Puedes hacer un hack para esto. Use la searchWords react-native-highlight-words lib y pase todo el texto como primer elemento de array de searchWords .