react native styled text

Texte stylé pour React Native

Introduction

Le but de cette bibliothèque est de prendre en charge le rendu facile des styles de texte mixtes.

La bibliothèque implémente un composant StyledText prenant une chaîne de type HTML dans la propriété children et une propriété de styles de texte en option.

Essayez-le

Demo en ligne sur expo.io

Installation

Pour installer la bibliothèque dans votre projet, exécutez le fil ou le NPM:

yarn add react-native-styled-text

ou

npm i react-native-styled-text

Exemples

En utilisant des styles par défaut

Pour un style simple, StyledText prend en charge certains styles prédéfinis:

• B: Audacieux
• I: italique
• U: souligner

Exemple:

 import { StyleSheet } from 'react-native' ;
import StyledText from 'react-native-styled-text' ;

...
  < StyledText
    style = { styles . header }
  >
    { "Ha<i>pp</i>y <b>Styling</b>!" }
  </ StyledText >
. . .

const styles = StyleSheet . create ( {
  header : {
    fontSize : 24 ,
    color : 'orange' ,
    textAlign : 'center' ,
    padding : 30 ,
  } ,
} ) ;

Rende comme

En utilisant des styles personnalisés

Pour un style plus riche, vous définissez la propriété textStyles de StyledText sur un objet (par exemple StyleSheet ) contenant vos styles de texte personnalisés et appliquez ces styles dans la propriété text .

Exemple:

 import { StyleSheet } from 'react-native' ;
import StyledText from 'react-native-styled-text' ;

...
  < StyledText
    style = { styles . welcome }
    textStyles = { textStyles }
  >
    { "Welcome to <b><u>React Native</u> <demo><i>Styled</i> Text</demo></b> demo!" }
  </ StyledText >
. . .

const styles = StyleSheet . create ( {
  welcome : {
    fontSize : 20 ,
    textAlign : 'center' ,
    padding : 30 ,
  } ,
} ) ;

const textStyles = StyleSheet . create ( {
  demo : {
    textShadowOffset : { width : 2 , height : 2 } ,
    textShadowColor : '#555555' ,
    textShadowRadius : 6 ,
    fontSize : 24 ,
    color : '#22AA44' ,
  } ,
} ) ;

Rende comme

Comment ça marche

En interne, la fonction render de StyledText analyse la valeur de la propriété children , qui doit être une chaîne, et renvoie une structure imbriquée des composants Text natif React.

À partir de l'exemple ci-dessus:

 < StyledText style = { styles . header } > { 'Ha<i>pp</i>y <b>Styling</b>!' } </ StyledText >

serait transformé en:

 < Text style = { styles . header } >
  Ha < Text style = { defaultStyles . i } > pp </ Text > y { ' ' }
  < Text style = { defaultStyles . b } > Styling </ Text > !
</ Text >

Donc, StyledText fournit simplement un codage plus compact, lisible et flexible des composants Text imbriqués.

API

En plus des propriétés Text natif React, StyledText prend en charge les propriétés suivantes, avec une restriction sur les children Proerty:

Nom	Description
enfants	String avec des balises de style pour le style mixte du texte. Chaque balise de style doit correspondre à l'un des styles fournis dans TextStyles ou l'un des styles par défaut, voir ci-dessous. (Facultatif)
toxyles	Object (par exemple StyleSheet ) contenant la définition des styles utilisés dans le texte fourni. (Facultatif)

Les styles par défaut suivants sont définis:

Nom	Description
b	audacieux
je	italique
u	souligner

Contributeurs

Bjørn Egil Hansen (@bjornegil)

Sponsors

FRAM X - Une société d'applications multiplateformes de Norvège.