react native styled text

Teks gaya untuk React Native

Perkenalan

Tujuan perpustakaan ini adalah untuk mendukung rendering gaya teks campuran yang mudah.

Perpustakaan mengimplementasikan komponen StyledText yang mengambil string seperti HTML di properti children dan properti gaya teks opsional.

Cobalah

Demo online di expo.io

Instalasi

Untuk menginstal perpustakaan ke dalam proyek Anda, jalankan benang atau NPM:

yarn add react-native-styled-text

atau

npm i react-native-styled-text

Contoh

Menggunakan gaya default

Untuk Styling StyledText sederhana mendukung beberapa gaya yang telah ditentukan:

• B: tebal
• I: Italic
• U: Garis bawah

Contoh:

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

Merender sebagai

Menggunakan gaya khusus

Untuk gaya yang lebih kaya, Anda mengatur properti textStyles dari StyledText ke sebuah objek (misalnya StyleSheet ) yang berisi gaya teks khusus Anda dan menerapkan gaya ini di properti text .

Contoh:

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

Merender sebagai

Cara kerjanya

Secara internal, fungsi render dari StyledText mem -parsing nilai properti children , yang harus berupa string, dan mengembalikan struktur bersarang komponen Text asli React.

Dari contoh di atas:

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

akan diubah menjadi:

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

Jadi StyledText hanya memberikan pengkodean komponen Text bersarang yang lebih kompak, mudah dibaca, dan fleksibel.

API

Selain properti Text Asli React, StyledText mendukung sifat -sifat berikut, dengan pembatasan pada children Proerty:

Nama	Keterangan
anak-anak	String dengan tag gaya untuk gaya teks campuran. Setiap tag gaya harus cocok dengan salah satu gaya yang disediakan dalam TextStyles atau salah satu gaya default, lihat di bawah. (Opsional)
Teks	Objek (misalnya StyleSheet ) yang berisi definisi gaya yang digunakan dalam teks yang disediakan. (Opsional)

Gaya default berikut didefinisikan:

Nama	Keterangan
B	berani
Saya	miring
u	menggarisbawahi

Kontributor

Bjørn Egil Hansen (@bjornegil)

Sponsor

FRAM X - Perusahaan aplikasi lintas platform dari Norwegia.