react native styled text

反應本地的樣式文字

介紹

該庫的目的是支持混合文本樣式的輕鬆渲染。

該庫在children屬性和可選的文本樣式屬性中實現了帶有類似於HTML的字符串的StyledText組件。

嘗試一下

expo.io上的在線演示

安裝

要將庫安裝到您的項目中，請運行紗線或NPM：

yarn add react-native-styled-text

或者

npm i react-native-styled-text

例子

使用默認樣式

對於簡單的樣式， StyledText支持一些預定義的樣式：

• B：大膽
• 我：斜體
• U：下劃線

例子：

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

渲染為

使用自定義樣式

對於更豐富的樣式，您將StyledText的textStyles屬性設置為包含自定義文本樣式的對象（例如StyleSheet ），並將這些樣式應用於text屬性。

例子：

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

渲染為

它如何工作

在內部， StyledText的render函數解析了必須是字符串的children屬性的值，並返回React本機Text組件的嵌套結構。

從上面的示例：

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

將轉變為：

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

因此， StyledText僅提供了嵌套Text組件的更緊湊，可讀和靈活的編碼。

API

除了反應本地Text屬性外， StyledText還支持以下屬性，並限制了children ：

姓名	描述
孩子們	帶有樣式標籤的字符串，用於文本的混合樣式。每個樣式標籤必須匹配文本風格或默認樣式之一中提供的一種樣式，請參見下文。 （選修的）
文本風格	對象（例如StyleSheet ）包含提供文本中使用的樣式的定義。 （選修的）

定義了以下默認樣式：

姓名	描述
b	大膽的
我	斜體
你	強調

貢獻者

BjørnEgil Hansen（@bjornegil）

贊助商

Fram X-來自挪威的跨平台應用公司。