react native styled text

React Native를위한 스타일 텍스트

소개

이 라이브러리의 목적은 혼합 텍스트 스타일을 쉽게 렌더링하는 것입니다.

라이브러리는 children 속성에서 HTML과 같은 문자열과 선택적 텍스트 스타일 속성을 취하는 StyledText 구성 요소를 구현합니다.

시도해보십시오

expo.io의 온라인 데모

설치

도서관을 프로젝트에 설치하려면 원사 또는 NPM을 실행하십시오.

yarn add react-native-styled-text

또는

npm i react-native-styled-text

예

기본 스타일을 사용합니다

간단한 스타일 스타일 StyledText 사전 정의 된 스타일을 지원합니다.

• B : 대담한
• I : 이탤릭체
• 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 속성의 값을 구문 분석하고, 이는 문자열이어야하며, 반응 기본 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

React Native Text 속성 외에도 StyledText children Proerty에 대한 제한과 함께 다음 속성을 지원합니다.

이름	설명
어린이들	텍스트의 혼합 스타일링을위한 스타일 태그가있는 문자열. 각 스타일 태그는 텍스트 스타일 또는 기본 스타일 중 하나에 제공된 스타일 중 하나와 일치해야합니다. 아래 참조하십시오. (선택 과목)
텍스트 스타일	제공된 텍스트에 사용 된 스타일의 정의가 포함 된 Object (예 : StyleSheet ). (선택 과목)

다음 기본 스타일이 정의됩니다.

이름	설명
비	용감한
나	이탤릭체
유	밑줄

기고자

Bjørn Egil Hansen (@bjornegil)

스폰서

FRAM X- 노르웨이의 크로스 플랫폼 앱 회사.