react native styled text

Gestylerter Text für React Native

Einführung

Der Zweck dieser Bibliothek besteht darin, eine einfache Darstellung gemischter Textstile zu unterstützen.

Die Bibliothek implementiert eine StyledText Komponente, die eine HTML-ähnliche Zeichenfolge in der children und eine optionale SMS-Eigenschaft mit der Eigenschaft von Textstilen einnimmt.

Probieren Sie es aus

Online -Demo auf Expo.io

Installation

Um die Bibliothek in Ihr Projekt zu installieren, führen Sie Garn oder NPM aus:

yarn add react-native-styled-text

oder

npm i react-native-styled-text

Beispiele

Verwenden von Standardstilen

Für den einfachen Styling StyledText unterstützt einige vordefinierte Stile:

• B: fett
• I: ITALIC
• U: Unterstreich

Beispiel:

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

Rendert als

Benutzerdefinierte Stile verwenden

Für ein reichhaltigeres Styling setzen Sie die textStyles von StyledText auf ein Objekt (z. B. StyleSheet ), das Ihre benutzerdefinierten Textstile enthält, und wenden Sie diese Stile in der text an.

Beispiel:

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

Rendert als

Wie es funktioniert

Intern analysiert die render von StyledText den Wert der children , die eine Zeichenfolge sein muss, und gibt eine verschachtelte Struktur von reag -nativen Text zurück.

Aus dem obigen Beispiel:

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

würde verwandelt werden in:

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

StyledText bietet also nur eine kompaktere, lesbare und flexiblere Codierung verschachtelter Text .

API

Zusätzlich zu den React Native Text -Eigenschaften unterstützt StyledText die folgenden Eigenschaften mit einer Einschränkung der children :

Name	Beschreibung
Kinder	Zeichenfolge mit Stiletiketten für gemischtes Styling des Textes. Jedes Style -Tag muss einem der in Textstilen oder eines der Standardstile bereitgestellten Stile übereinstimmen, siehe unten. (Optional)
Textstile	Objekt (zB StyleSheet ) mit Definition der im angegebenen Text verwendeten Stile. (Optional)

Die folgenden Standardstile sind definiert:

Name	Beschreibung
B	deutlich
ich	kursiv
u	unterstreichen

Mitwirkende

Bjørn Egil Hansen (@bjornegil)

Sponsoren

Fram X - Eine Cross -Plattform -App -Firma aus Norwegen.