web-dev-qa-db-fra.com

Comment rendre un composant de texte multiligne avec un espace blanc entre les lignes

J'essaie de reproduire ce qui suit dans React Native, un composant Text avec un espace blanc entre des lignes.

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>

Ajouter le même CSS ci-dessus à un composant Text ne génère pas le même résultat que l'extrait de code ci-dessus.

cssreact-native
17
Dan

Pour le moment, React Native n'a pas ce genre de style par défaut. La propriété CSS line-height n'est pas équivalente à la propriété de style lineHeight de RN.

Jetons un coup d'oeil à iOS par exemple:

lineHeight est mappé sur une propriété d'un objet de style de paragraphe qui contrôle la hauteur de ligne minimale/maximale, qui est ensuite appliquée à votre texte. Cette hauteur de ligne correspond à la hauteur totale du fragment. Toute couleur d'arrière-plan appliquée ici colorera la ligne entière.

Il existe une autre propriété de l'objet de paragraphe natif appelée lineSpacing qui est ajoutée après le calcul de la hauteur de ligne. Cette propriété peut réellement contrôler l’espace et obtenir l’effet exact recherché. Malheureusement, RN ne vous donne pas le contrôle de cette propriété .

Vous pouvez donc trouver un package offrant ce type de fonctionnalité ou essayer d’implémenter vous-même une solution native.

8
Artal

Je pense que vous avez besoin que la text soit display: inline

0
danfitz36

Vous pouvez utiliser lineHeight au lieu de line-height dans react native. Si vous voulez changer de couleur d'espace. ce hack, définissez la couleur de fond blanche pour Text. 

0
Khemraj

Text ne se comportera pas comme un span. Vous pouvez faire un bidouillage pour cela. Utilisez react-native-highlight-words lib et transmettez tout le texte en tant que premier élément de tableau searchWords.

0
yakato

Utilisez flexWrap: "wrap" et 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>

0
Rajat Gupta