react native styled textダウンロード - react native styled textソースコードをダウンロードする

react native styled text

フォントのダウンロード

v1.1.2

ダウンロード

ネイティブのReactのスタイルテキスト

導入

このライブラリの目的は、ミックステキストスタイルの簡単なレンダリングをサポートすることです。

ライブラリは、 childrenプロパティにHTMLのような文字列とオプションのテキストスタイルプロパティを使用して、 StyledTextコンポーネントを実装しています。

試してみてください

expo.ioのオンラインデモ

インストール

ライブラリをプロジェクトにインストールするには、糸またはnpmを実行します。

yarn add react-native-styled-text

または

npm i react-native-styled-text

例

デフォルトスタイルを使用します

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

ASをレンダリングします

カスタムスタイルを使用します

よりリッチなスタイリングのために、カスタムテキストスタイルを含むオブジェクト（ StyleSheetなど）にStyledTextのtextStylesスタイルプロパティを設定し、 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' ,
  } ,
} ) ;

ASをレンダリングします

それがどのように機能するか

内部的には、 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ネイティブのTextプロパティに加えて、 StyledText次のプロパティをサポートし、 children proertyを制限します。

名前	説明
子供たち	テキストの混合スタイリングのスタイルタグ付き文字列。各スタイルのタグは、テキストスタイルまたはデフォルトのスタイルのいずれかで提供されるスタイルの1つと一致する必要があります。以下を参照してください。（オプション）
テキストスタイル	提供されたテキストで使用されているスタイルの定義を含むオブジェクト（ `StyleSheet`など）。（オプション）

次のデフォルトスタイルが定義されています。