react native styled text Download - react native styled text Source Code Download 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 التصميم البسيط بعض الأنماط المحددة مسبقًا:

ب: جريء
أنا: مائل
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` ) يحتوي على تعريف للأنماط المستخدمة في النص المقدم. (خياري)

يتم تعريف الأنماط الافتراضية التالية: