react native styled text

Texto estilizado para react nativo

Introdução

O objetivo desta biblioteca é apoiar a fácil renderização de estilos de texto misto.

A biblioteca implementa um componente StyledText que toma uma string de HTML na propriedade children e uma propriedade de estilos de texto opcional.

Experimente

Demoção online na expo.io

Instalação

Para instalar a biblioteca em seu projeto, execute fios ou npm:

yarn add react-native-styled-text

ou

npm i react-native-styled-text

Exemplos

Usando estilos padrão

Para um estilo simples, StyledText suporta alguns estilos predefinidos:

• B: Em negrito
• I: itálico
• u: sublinhado

Exemplo:

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

Renderiza como

Usando estilos personalizados

Para um estilo mais rico, você define a propriedade textStyles do StyledText como um objeto (por exemplo, StyleSheet ) contendo seus estilos de texto personalizados e aplica esses estilos na propriedade text .

Exemplo:

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

Renderiza como

Como funciona

Internamente, a função render do StyledText analisa o valor da propriedade children , que deve ser uma string, e retorna uma estrutura aninhada dos componentes Text nativo do React.

Do exemplo acima:

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

seria transformado para:

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

Portanto, StyledText fornece apenas uma codificação mais compacta, legível e flexível de componentes Text aninhados.

API

Além das propriedades do React Native Text , StyledText suporta as seguintes propriedades, com uma restrição à Proerty children :

Nome	Descrição
crianças	String com tags de estilo para estilo misto do texto. Cada tag de estilo deve corresponder a um dos estilos fornecidos no TextStyles ou em um dos estilos padrão, veja abaixo. (Opcional)
textstyles	Objeto (por exemplo, StyleSheet ) contendo definição dos estilos usados no texto fornecido. (Opcional)

Os seguintes estilos padrão são definidos:

Nome	Descrição
b	audacioso
eu	itálico
u	sublinhado

Colaboradores

Bjørn Egil Hansen (@Bjornegil)

Patrocinadores

FRAM X - Uma empresa de aplicativos de plataforma cruzada da Noruega.