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-来自挪威的跨平台应用公司。