react native text size

رد حجم النص الأصلي

قم بقياس النص بدقة قبل وضعه واحصل على معلومات الخط من تطبيقك (Android و iOS).

في بلدي (المكسيك) ، يتم رواتب مطوري البرمجيات ، لذلك اضطررت إلى البحث عن وظيفة أخرى لكسب لقمة العيش ولا يمكنني تكريس المزيد من الوقت للحفاظ على هذا ومستودعات أخرى على مر السنين قد ولدت أي أموال لي. إذا كان أي شخص متطرفًا في الحفاظ على هذا المستودع ، فسأكون سعيدًا بنقله إليهم ، إلى جانب حزمة NPM المرتبطة بها.
في بلدي (المكسيك) ، يشعر مطورو البرمجيات بالرعب ، لذلك اضطررت إلى البحث عن وظيفة أخرى لكسب لقمة العيش ولا يمكنني قضاء المزيد من الوقت في الحفاظ على هذا المستودعات وغيرها من المستودعات لسنوات لم يولد أموالًا أبدًا. إذا كان شخص ما مهتمًا بالحفاظ على هذا المستودع ، فسوف أقوم بنقله بكل سرور ، وكذلك حزمة NPM المرتبطة بها.

هناك وظيفتان رئيسيتان: flatHeights للحصول على ارتفاع كتل النص المختلفة في وقت واحد ، محسّنة لمكونات مثل <FlatList> أو <RecyclerListView> .

الآخر هو measure ، الذي يحصل على معلومات مفصلة حول نص النص:

• العرض الذي يستخدمه النص ، مع خيار لحساب العرض الحقيقي لأكبر خط.
• ارتفاع النص ، مع أو بدون حشائش.
• عدد الخطوط.
• عرض الخط الأخير.
• معلومات ممتدة لخط معين.

يعتبر العرض والارتفاع نفس الشيء مثل تلك التي تم استلامها من حدث onLayout لمكون <Text> مع نفس الخصائص.

في كلتا الوظيفتين ، مطلوب النص المطلوب قياسه ، ولكن بقية المعلمات اختيارية وتعمل بنفس الطريقة التي يتمتع بها React Native:

• fontFamily
• fontSize
• fontWeight
• fontStyle
• fontVariant (iOS)
• includeFontPadding (Android)
• textBreakStrategy (Android)
• letterSpacing
• allowFontScaling
• width : قيود لخطوط الخط التلقائي بناءً على استراتيجية النص.

في Adionion ، تتضمن المكتبة وظائف للحصول على معلومات حول الخطوط المرئية للتطبيق.

إذا كان ذلك قد ساعدك ، فيرجى دعم عملي مع نجمة ️ أو Ko-Fi.

تثبيت

في الغالب التثبيت التلقائي من NPM

yarn add react-native-text-size
react-native link react-native-text-size

قم بتغيير التوجيه compile إلى implementation في كتلة التبعيات في ملف Android/App/Build.grale.

متطلبات:

• رد فعل V0.57 الأصلي أو أحدث.
• Android API 16 أو iOS 9.0 وما فوق.

بالنسبة للإصدارات قبل 0.56 من React Native ، يرجى استخدام Rection-Native-Size V2.1.1

انظر التثبيت اليدوي على الويكي كبديل إذا كان لديك مشاكل مع التثبيت التلقائي.

API

• measure

• flatHeights

• specsForTextStyles

• fontFromSpecs

• fontFamilyNames

• fontNamesForFamilyName

يقيس

 measure ( options : TSMeasureParams ) : Promise < TSMeasureResult >

تقيس هذه الوظيفة النص كما يفعل RN ونتائجه تتكون* مع حدث Onlayout من Text . يستغرق مجموعة فرعية من الخصائص المستخدمة من قبل <Text> لوصف خيارات الخط والخطية للاستخدام.

إذا قدمت width ، فسيقوم القياس بتطبيق التفاف التلقائي بالإضافة إلى فترات الفواصل الصريحة.

* قد يكون هناك غير متناسق في iOS ، انظر هذه القضية تعرف على معرفة المزيد.

ملحوظة:

على الرغم من أن هذه الوظيفة دقيقة وتوفر معلومات كاملة ، إلا أنها قد تكون ثقيلة إذا كان النص كثيرًا ، مثل تلك التي يمكن عرضها في قائمة مسطحة. بالنسبة لهذه الحالات ، من الأفضل استخدام flatHeights ، والتي تم تحسينها لمعالجة الدُفعات.

tsmeasureparams

كائن JS عادي مع هذه الخصائص ( text فقط مطلوب):

ملكية	يكتب	تقصير	ملحوظات
نص	خيط	(لا أحد)	هذه هي المعلمة المطلوبة الوحيدة وقد تشمل الرموز التعبيرية أو أن تكون فارغة ، ولكن يجب ألا تكون null . إذا كانت هذه سلسلة فارغة ، فسيكون width الناتج صفرًا.
fontfamily	خيط	أنا أعتمد	الافتراضي هو نفسه المطبق بواسطة React Native: Roboto في Android ، سان فرانسيسكو في iOS. ملاحظة: يمكن لتصنيع الجهاز أو ROM المخصص تغيير الخط الافتراضي.
وزن	خيط	'طبيعي'	على Android ، نطاقات الأرقام ليس لديك تفريغ و "500" إلى "900" تصبح "BOLD" ، ولكن يمكنك استخدام fontFamily ذات وزن معين ("Sans-Serif-shin" ، "Sans-Serif-Medium" ، إلخ).
الحجم	رقم	14	يأتي حجم الخط الافتراضي من RN.
fontstyle	خيط	'طبيعي'	واحدة من "الطبيعي" أو "مائل".
fontvariant	صفيف	(لا أحد)	iOS فقط
ALLEFONTSCALING	منطقية	حقيقي	لاحترام إعداد المستخدم للخطوط الكبيرة (أي استخدام وحدات SP).
letterspacing	رقم	(لا أحد)	تباعد إضافي بين الشخصيات (AKA tracking ). ملاحظة: في iOS ، يلغي الصفر kerning التلقائي. جميع iOS ، Android مع API 21+
تشمل FontPadding	منطقية	حقيقي	الحشو العلوي والسفلي ، لتجنب قص بعض الأحرف. Android فقط
TextBreakStrategy	خيط	'highqualy'	واحدة من "البسيطة" أو "متوازنة" أو "Highqualy". Android فقط ، مع API 23+
عرض	رقم	max_int	تقييد العرض. سيختلف ارتفاع النتيجة حسب التدفق التلقائي للنص.
useprecisewidth	منطقية	خطأ شنيع	إذا كان true ، فستتضمن النتيجة width دقيقًا وخاصية lastLineWidth . يمكنك رؤية تأثير هذا العلم في تطبيق نموذج.
LineInfoforline	رقم	(لا أحد)	إذا >=0 ، ستتضمن النتيجة خاصية lineInfo مع معلومات عن رقم السطر المطلوب.

يُظهر تطبيق العينة بشكل تفاعلي تأثير هذه المعلمات على الشاشة.

Tsmeasureresult

يعيد measure الوعد الذي يحل إلى كائن JS مع هذه الخصائص:

ملكية	يكتب	ملحوظات
عرض	رقم	إجمالي العرض المستخدم. قد يكون LES أو يساوي خيار width . على Android ، قد تختلف هذه القيمة اعتمادًا على علامة usePreciseWidth .
ارتفاع	رقم	إجمالي الارتفاع ، بما في ذلك الحشوة العلوية والسفلية إذا تم تضمين includingFontPadding (الافتراضي).
LastLineWidth	رقم	عرض السطر الأخير ، دون الفراغات المتأخرة. إذا كان usePreciseWidth false (الافتراضي) ، فإن هذه الخاصية غير محددة.
linecount	رقم	عدد الخطوط ، مع الأخذ في الاعتبار فترات الفواصل الصلبة والأوتوماتيكية.
lineinfo	هدف	معلومات الخط. إذا لم يتم إعطاء خيار lineInfoForLine ، فسيكون هذه الخاصية غير محددة.

lineinfo

إذا كانت قيمة lineInfoForLine هي greelter أو lineCount على قدم المساواة ، فإن هذه المعلومات مخصصة للسطر الأخير (أي lineCount - 1).

ملكية	يكتب	ملحوظات
خط	رقم	رقم سطر هذه المعلومات ، قاعدة 0. يمكن أن يكون أقل من خط lineInfoForLine .
يبدأ	رقم	إزاحة نص بداية هذا الخط.
نهاية	رقم	إزاحة النص بعد آخر حرف مرئي (حتى لا يتم حساب المسافة البيضاء) على هذا الخط.
قاع	رقم	الموضع الرأسي في أسفل هذا الخط ، بما في ذلك الحشو.
عرض	رقم	الأعمدة الأفقية لهذا الخط ، بما في ذلك المسافة البادئة الهامش الرائدة ، ولكن باستثناء المسافة البيضاء المتخيل. استخدم usePreciseWidth:true للحصول على قيمة دقيقة لهذه الخاصية.

في حالة الخطأ ، يتم رفض الوعد باستخدام كائن ممتد مع أحد رموز الخطأ التالية ، كسلسلة حرفية:

شفرة	تفاصيل
e_missing_parameters	يتطلب measure كائنًا مع المعلمات ، والتي لم يتم توفيرها.
e_missing_text	النص لقياس هو null أو لم يتم توفيره.
e_invalid_font_spec	مواصفات الخط غير صالحة. من غير المحتمل أن يحدث هذا على Android.
e_unknown_error	حسنا ... من يدري؟

مثال

 //...
import rnTextSize , { TSFontSpecs } from 'react-native-text-size'

type Props = { }
type State = { width : number , height : number }

// On iOS 9+ will show 'San Francisco' and 'Roboto' on Android
const fontSpecs : TSFontSpecs = {
  fontFamily = undefined ,
  fontSize = 24 ,
  fontStyle = 'italic' ,
  fontWeight = 'bold' ,
}
const text = 'I ❤️ rnTextSize'

class Test extends Component < Props , State > {
  state = {
    width : 0 ,
    height : 0 ,
  }

  async componentDidMount ( ) {
    const width = Dimensions . get ( 'window' ) . width * 0.8
    const size = await rnTextSize . measure ( {
      text ,             // text to measure, can include symbols
      width ,            // max-width of the "virtual" container
      ... fontSpecs ,     // RN font specification
    } )
    this . setState ( {
      width : size . width ,
      height : size . height
    } )
  }

  // The result is reversible
  render ( ) {
    const { width , height } = this . state
    return (
      < View style = { { padding : 12 } } >
        < Text style = { { width , height , ... fontSpecs } } >
          { text }
        </ Text >
      </ View >
    )
  }
} 

الخاتم

 flatHeights ( options : TSHeightsParams ) : Promise < number [ ] >

حساب ارتفاع كل من السلاسل في صفيف.

هذا بديل measure المخصص للحالات التي تقوم فيها بحساب ارتفاع كتل النص ذات العدد ذي الخصائص الشائعة (العرض ، الخط ، إلخ) ، حالة الاستخدام النموذجية مع مكونات <FlatList> أو <RecyclerListView> .

يستخدم القياس نفس الخوارزمية مثل measure ولكنه لا يعيد سوى ارتفاع كل كتلة ، وتجنب خطوات متعددة عبر الجسر ، يكون أسرع ... أسرع بكثير على Android!

لقد أجريت اختبارات على 5000 كتل نصية عشوائية وكانت هذه هي النتائج (MS):

	measure	flatHeights
Android	49624	1،091
iOS	1949	732

في المستقبل ، سأقوم بإعداد مثال على استخدامه مع قائمة مسطحة وأنماط متعددة على نفس البطاقة.

tsheightsparams

هذا كائن مشابه للكتاب الذي تمرره measure ، ولكن خيار text هو مجموعة من الأوتار ويتم تجاهل خيارات usePreciseWidth و lineInfoForLine .

ملكية	يكتب	تقصير
نص	خيط []	(لا أحد)
عرض	رقم	اللانهاية
fontfamily	خيط	أنا أعتمد
وزن	خيط	'طبيعي'
الحجم	رقم	14
fontstyle	خيط	'طبيعي'
fontvariant	صفيف	(لا أحد)
ALLEFONTSCALING	منطقية	حقيقي
letterspacing	رقم	(لا أحد)
تشمل FontPadding	منطقية	حقيقي
TextBreakStrategy	خيط	'highqualy'

النتائج هي وعد يحل إلى صفيف مع ارتفاع كل كتلة (في SP ) ، في نفس الترتيب الذي تم استلام الكتل.

على عكس القياس ، تُرجع العناصر null 0 دون إنشاء خطأ ، وتُرجع السلاسل الفارغة نفس الارتفاع الذي يعينه RN إلى مكونات <Text> null .

مثال

 //...
import rnTextSize , { TSFontSpecs } from 'react-native-text-size'

type Props = { texts : string [ ] }
type State = { heights : number [ ] }

// On iOS 9+ will show 'San Francisco' and 'Roboto' on Android
const fontSpecs : TSFontSpecs = {
  fontFamily = undefined ,
  fontSize = 24 ,
  fontStyle = 'italic' ,
  fontWeight = 'bold' ,
}
const texts = [ 'I ❤️ rnTextSize' , 'I ❤️ rnTextSize using flatHeights' , 'Thx for flatHeights' ]

class Test extends Component < Props , State > {
  state = {
    heights : [ ] ,
  }

  async componentDidMount ( ) {
    const { texts } = this . props
    const width = Dimensions . get ( 'window' ) . width * 0.8
    const heights = await rnTextSize . flatHeights ( {
      text : texts ,      // array of texts to measure, can include symbols
      width ,            // max-width of the "virtual" container
      ... fontSpecs ,     // RN font specification
    } )
    this . setState ( {
      heights
    } )
  }

  render ( ) {
    const { texts } = this . props
    const { heights } = this . state
    
    return (
      < View style = { { padding : 12 } } >
        { texts . map (
          ( text , index ) => (
            < Text style = { { height : heights [ index ] , ... fontSpecs } } >
              { text }
            </ Text >
          )
        ) }
      </ View >
    )
  }
} 

SpecsfortextStstyles

 specsForTextStyles ( ) : Promise < { [ key : string ] : TSFontForStyle } >

احصل على معلومات خط النظام لنظام التشغيل تشغيل.

هذا غلاف لنظام UIFont.preferredFontForTextStyle OROS

والنتيجة هي الوعد الذي يحل على مفاتيح كائن JS يعتمد على نظام التشغيل ، ولكن قيمها بدورها كائنات متوافقة تمامًا مع Withhese المستخدمة في أنماط RN ، بحيث يمكن استخدامها لتسميد مكونات <Text> أو <TextInput> :

Tsfontfortyle

ملكية	يكتب	ملحوظات
fontfamily	خيط	اسم عائلة النظام أو وجه الخط.
الحجم	رقم	حجم الخط في SP (غير محدد).
fontstyle	tsfontstyle	فقط إذا "مائل" ، غير محدد إذا كان النمط "طبيعي".
وزن	Tsfontweight	فقط إذا كان "جريئًا" ، غير محدد إذا كان الوزن "طبيعيًا".
fontvariant	tsfontvariant [] أو فارغة	iOS فقط . حاليا ، لا يوجد نمط يشمل هذا الخاصية.
letterspacing	رقم	تم حذفه إذا تم تشغيله على Android مع RN Loower من 0.55

لمعرفة الأسماء الرئيسية ، يرجى الاطلاع على مفاتيح من specsfortextstyles في الويكي.

لم أحاول تطبيع مفاتيح النتيجة ، باستثناء اثنين أو ثلاثة ، لديهم تفسير مختلف في كل نظام تشغيل ، ولكن يمكنك استخدامها لإنشاء أنماط جمركية وفقًا لاحتياجاتك.

fontfromspecs

 fontFromSpecs ( specs : TSFontSpecs ) : Promise < TSFontInfo >

يعيد خصائص الخط الذي تم الحصول عليه من المواصفات المحددة.

tsfontspecs

هذه المعلمة هي مجموعة فرعية من TSMeasureParams ، لذلك تم حذف التفاصيل هنا.

ملكية	يكتب	تقصير
fontfamily	خيط	iOS: 'San Francisco' ، Android: 'Roboto'
وزن	خيط	'طبيعي'
الحجم	رقم	14
fontstyle	خيط	'طبيعي'
fontvariant	خيط []	(لا أحد)
letterspacing	رقم	0

يستخدم fontFromSpecs ضمنيًا allowsFontScaling:true ، وبما أن هذه وظيفة القياس ، includeFontPadding التي لم تعنيها.

tsfontinfo

النتائج هي وعد يحل على كائن JS مع معلومات للخط والحجم المعطى ، والوحدات في SP في Android أو نقاط في iOS ، باستخدام أرقام النقاط العائمة حيث تطبيق*.

ملكية	يكتب	تفاصيل
fontfamily	خيط	في Android هو نفس السلسلة التي تم تمريرها كمعلمة.
fontname	خيط	iOS فقط ، undefined دائمًا في Android.
الحجم	رقم	قد يكون مختلفًا عن المعلمة المحددة إذا كانت المعلمة تتضمن العشرية.
fontstyle	خيط	"طبيعي" أو "مائل".
وزن	خيط	يمكن أن ينتقل "الطبيعي" أو "Bold" ، على iOS من "100" إلى "900".
fontvariant	خيط []	iOS فقط ، undefined دائمًا في Android.
صعود	رقم	المسافة الموصى بها فوق خط الأساس للنص متباعدة.
النزول	رقم	المسافة الموصى بها أسفل خط الأساس للنص متباعدة.
capheight	رقم	iOS فقط ارتفاع شخصيات رأس المال.
Xheight	رقم	iOS فقط ارتفاع صغير "x".
قمة	رقم	Android فقط . الحد الأقصى للمسافة فوق خط الأساس لـ Tallles Glyph في الخط.
قاع	رقم	Android فقط . الحد الأقصى للمسافة تحت خط الأساس لأدنى حروف رسومية في الخط.
القيادة	رقم	المساحة الإضافية الموصى بها لإضافة بين خطوط النص.
lineheight	رقم	ارتفاع الخط الموصى به. يجب أن يكون أكبر إذا كان النص يحتوي على رموز أحادية ، مثل الرموز التعبيرية.
_hash	رقم	رمز التجزئة ، قد يكون مفيدًا لتصحيح الأخطاء.

* استخدام العوامات أكثر دقة من الأعداد الصحيحة ويسمح لك باستخدام طريقة التقريب المفضلة لديك ، ولكن لا يزيد عن 5 أرقام من الدقة في هذه القيم. أيضًا ، تذكر أن RN لا يعمل مع البكسلات الفرعية في Android وسوف تقطع هذه القيم.

شاهد المزيد في:

فهم الطباعة في موقع تصميم مواد Google.

حول معالجة النص في iOS لنظام التشغيل iOS.

أسماء fontfamilynames

 fontFamilyNames ( ) : Promise < string [ ] >

إرجاع وعد لمجموعة من أسماء عائلة الخطوط المتاحة على النظام.

على iOS ، يمكنك استخدام طريقة UIFont.familyNames من Uikit.

على Android ، يتم ترميز النتيجة لخطوط النظام وتكمل ديناميكيًا مع الخطوط المثبتة بواسطة تطبيقك ، إن وجدت.

تعرف على خطوط Android والخطوط المخصصة في الويكي لمعرفة المزيد عن هذه القائمة.

fontnamesforfamilyname

 fontNamesForFamilyName ( fontFamily : string ) : Promise < string [ ] >

Wrapper for UIFont.fontNamesForFamilyName من Uikit ، إرجاع مجموعة من أسماء الخطوط المتاحة في عائلة خط معينة.

يمكنك استخدام وظيفة fontFamilyNames من rntextsize للحصول على مجموعة من أسماء عائلة الخطوط المتاحة على النظام.

هذه وظيفة iOS فقط ، على Android ، تحل دائمًا إلى null .

القضايا المعروفة

عرض غير متناسق بين المنصات

في نظام التشغيل iOS ، يتضمن العرض الناتج عن كل من measure و flatHeights ، مسافة بيضاء رائدة بينما يتم تجاهلها في Android.

الارتفاع الشيرل (iOS)

على iOS ، يأخذ RN في الاعتبار الوضع المطلق على الشاشة لحساب الأبعاد. لا يمكن لـ RNTextsize القيام بذلك ، ويمكن أن يكون لكل من العرض والارتفاع فرقًا يصل إلى 1 بكسل (وليس نقطة).

letterspacing عدم التحجيم (iOS)

لا يدعم RN أحجام الأنواع الديناميكية ، ولكنها تقوم بعمل ممتاز تقليد هذه الميزة Thruch allowFontScaling ... est -excep for letterSpacing لم يتم تحجيمها.

آمل أن يحل نسخة مستقبلية من RN هذه المشكلة.

دعم Lineheight

على الرغم من أن rntextsize يوفر lineHeight الناتج عن وظائف SUM ، فإنه لا يدعمها كمعلمة لأنك تستخدم خوارزمية غير قياسية لتعيينها. أوصي بأن لا تستخدم lineHeight إلا إذا كانت محتاجة تمامًا ، ولكن إذا كنت تستخدمها ، فحاول أن تجعلها 30 ٪ أو أكثر من حجم الخط ، أو استخدام طريقة rntextsize fontFromSpecs إذا كنت تريد المزيد من الدقة.

نص متداخل

مكونات متداخلة <Text> (أو مع الصور في الداخل)

الجميع

• التتبع الطبيعي أو تباعد الحروف في معلومات الخط.
• المزيد من الاختبارات ، بما في ذلك أجهزة تلفزيون Android و iOS.
• تعلم اللغة الإنجليزية الجميلة ، لصنع مستندات أفضل.
• Fint Lause NICE في الهدف القبيح C.

دعم عملي

أنا مطور كامل المكاسب مع أكثر من 20 عامًا من الخبرة وأحاول مشاركة معظم أعمالي مجانًا ومساعدة الآخرين ، لكن هذا يستغرق وقتًا كبيرًا من الوقت والجهد ، إذا كنت تحب عملي ، فيرجى التفكير ...

بالطبع ، نرحب أيضًا بالتعليقات ، PRS ، والنجوم؟

شكرا لدعمك!

رخصة

ترخيص BSD 2-PONING "مبسط".

© 2018-2019 ، ألبرتو مارتينيز. جميع الحقوق محفوظة.