react native styled text การดาวน์โหลด react native styled text Source Source Download

react native styled text

ดาวน์โหลดแบบอักษร

v1.1.2

ดาวน์โหลด

ข้อความสไตล์สำหรับ React Native

การแนะนำ

จุดประสงค์ของไลบรารีนี้คือการสนับสนุนการแสดงผลรูปแบบข้อความผสมง่าย

ไลบรารีใช้องค์ประกอบ StyledText ที่ใช้สตริงเหมือน HTML ในคุณสมบัติ children และคุณสมบัติรูปแบบข้อความเสริม

ลองดู

การสาธิตออนไลน์บน expo.io

การติดตั้ง

ในการติดตั้งไลบรารีลงในโครงการของคุณให้เรียกใช้เส้นด้ายหรือ NPM:

yarn add react-native-styled-text

หรือ

npm i react-native-styled-text

ตัวอย่าง

การใช้สไตล์เริ่มต้น

สำหรับสไตล์ StyledText ที่เรียบง่ายรองรับสไตล์ที่กำหนดไว้ล่วงหน้า:

B: ตัวหนา
ฉัน: ตัวเอียง
คุณ: ขีดเส้นใต้

ตัวอย่าง:

 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 ดั้งเดิม

จากตัวอย่างด้านบน:

 < 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 Proerty:

ชื่อ คำอธิบาย

เด็ก สตริงที่มีแท็กสไตล์สำหรับสไตล์ผสมของข้อความ แต่ละแท็กสไตล์จะต้องตรงกับหนึ่งในสไตล์ที่มีให้ใน StextStyles หรือหนึ่งในสไตล์เริ่มต้นดูด้านล่าง (ไม่จำเป็น)

สไตล์ข้อความ วัตถุ (เช่น StyleSheet ) ที่มีคำจำกัดความของสไตล์ที่ใช้ในข้อความที่ให้ไว้ (ไม่จำเป็น)

ชื่อ	คำอธิบาย
เด็ก	สตริงที่มีแท็กสไตล์สำหรับสไตล์ผสมของข้อความ แต่ละแท็กสไตล์จะต้องตรงกับหนึ่งในสไตล์ที่มีให้ใน StextStyles หรือหนึ่งในสไตล์เริ่มต้นดูด้านล่าง (ไม่จำเป็น)
สไตล์ข้อความ	วัตถุ (เช่น `StyleSheet` ) ที่มีคำจำกัดความของสไตล์ที่ใช้ในข้อความที่ให้ไว้ (ไม่จำเป็น)

มีการกำหนดรูปแบบเริ่มต้นต่อไปนี้: