react native styled text

Texto con estilo para react nativo

Introducción

El propósito de esta biblioteca es admitir la representación fácil de los estilos de texto mixtos.

La biblioteca implementa un componente StyledText que toma una cadena similar a HTML en la propiedad children y una propiedad de estilos de texto opcional.

Pruébalo

Demostración en línea en expo.io

Instalación

Para instalar la biblioteca en su proyecto, ejecute hilo o npm:

yarn add react-native-styled-text

o

npm i react-native-styled-text

Ejemplos

Usando estilos predeterminados

Para un estilo simple de estilo StyledText admite algunos estilos predefinidos:

• B: audaz
• I: cursiva
• U: subrayar

Ejemplo:

 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 ,
  } ,
} ) ;

Renders como

Usando estilos personalizados

Para un estilo más rico, establece la propiedad textStyles de StyledText en un objeto (por ejemplo, StyleSheet ) que contiene sus estilos de texto personalizados y aplica estos estilos en la propiedad text .

Ejemplo:

 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' ,
  } ,
} ) ;

Renders como

Cómo funciona

Internamente, la función render de StyledText analiza el valor de la propiedad de children , que debe ser una cadena, y devuelve una estructura anidada de componentes Text nativos React.

Del ejemplo anterior:

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

se transformaría en:

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

Por lo tanto, StyledText solo proporciona una codificación más compacta, legible y flexible de componentes Text anidados.

API

Además de las propiedades Text nativo de React, StyledText admite las siguientes propiedades, con una restricción en la proerty children :

Nombre	Descripción
niños	Cadena con etiquetas de estilo para un estilo mixto del texto. Cada etiqueta de estilo debe coincidir con uno de los estilos proporcionados en textstyles o uno de los estilos predeterminados, ver a continuación. (Opcional)
estilos de texto	Objeto (por ejemplo, StyleSheet ) que contiene definición de los estilos utilizados en el texto proporcionado. (Opcional)

Se definen los siguientes estilos predeterminados:

Nombre	Descripción
b	atrevido
i	itálico
u	subrayar

Colaboradores

Bjørn Egil Hansen (@bjornegil)

Patrocinadores

Fram X - Una compañía de aplicaciones de plataforma cruzada de Noruega.