react native styled text скачать - react native styled text Source Code Скачать

react native styled text

Загрузка шрифта

v1.1.2

Скачать

Стиль текста для нативного реагирования

Введение

Цель этой библиотеки - поддерживать легкий рендеринг стилей смешанного текста.

Библиотека реализует компонент StyledText принимающий HTML-подобную строку в свойство children и дополнительное свойство стилей текста.

Попробуйте это

Онлайн демо на expo.io

Установка

Чтобы установить библиотеку в свой проект, запустите пряжу или NPM:

yarn add react-native-styled-text

или

npm i react-native-styled-text

Примеры

Использование стилей по умолчанию

Для простого стиля StyledText поддерживает некоторые предопределенные стили:

Б: жирным шрифтом
Я: курсив
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 ,
  } ,
} ) ;

Рендерирует как

Использование пользовательских стилей

Для более богатого стиля вы устанавливаете свойство textStyles StyledText на объект (например, 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' ,
  } ,
} ) ;

Рендерирует как

Как это работает

Внутренне функция render StyledText анализирует значение свойства children , которое должно быть строкой, и возвращает вложенную структуру нативных Text компонентов React.

Из примера выше:

 < 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 React, StyledText поддерживает следующие свойства с ограничением в отношении children :

Имя	Описание
дети	Строка с тегами стиля для смешанного стиля текста. Каждый тег стиля должен соответствовать одному из стилей, представленных в текстовых стилях или в одном из стилей по умолчанию, см. Ниже. (Необязательный)
TextStyles	Объект (например, `StyleSheet` ), содержащий определение стилей, используемых в предоставленном тексте. (Необязательный)

Определены следующие стили по умолчанию: