Text في React Native
مكوّن React لعرض النصوص.
يدعم المكوّن Text
النصوص المتداخلة والتنسيق ومعالجة اللمسات.
في المثال التالي، يرث العنوان المتداخل والنص الأساسي خاصيّة fontFamily
من styles.baseText
، لكن العنوان يوفّر أنماطا إضافية خاصة به. سيتم تكديس العنوان والنص الأساسي فوق بعضهما البعض عند الوصول إلى محارف الأسطر الجديدة (literal newlines):
import React, { Component } from 'react';
import { Text, StyleSheet } from 'react-native';
export default class TextInANest extends Component {
constructor(props) {
super(props);
this.state = {
titleText: "Bird's Nest",
bodyText: 'This is not really a bird nest.'
};
}
render() {
return (
<Text style={styles.baseText}>
<Text style={styles.titleText} onPress={this.onPressTitle}>
{this.state.titleText}{'\n'}{'\n'}
</Text>
<Text numberOfLines={5}>
{this.state.bodyText}
</Text>
</Text>
);
}
}
const styles = StyleSheet.create({
baseText: {
fontFamily: 'Cochin',
},
titleText: {
fontSize: 20,
fontWeight: 'bold',
},
});
النصوص المتداخلة
يتيح كل من نظامي iOS وAndroid عرض نص منسق عن طريق التعليق (annotating) على نطاقاتِ سلسلةٍ نصيّة بتنسيقات محددة لجعله نصًّا غامقًا أو ملونًا مثلًا (NSAttributedString
على iOS وSpannableString
على Android). عمليًّا، هذا شاق للغاية. في React Native، يُمكن استخدام صيغة الويب لهذا الغرض، حيث يمكنك تدخيل النص لتحقيق التأثير نفسه.
import React, { Component } from 'react';
import { Text } from 'react-native';
export default class BoldAndBeautiful extends Component {
render() {
return (
<Text style={{fontWeight: 'bold'}}>
I am bold
<Text style={{color: 'red'}}>
and red
</Text>
</Text>
);
}
}
وراء الكواليس، يُحوِّل React Native هذا إلى سلسلة NSAttributedString
نصيّة مسطحة أو سلسلة SpannableString
نصيّة تحتوي على المعلومات التالية:
"I am bold and red"
0-9: bold
9-17: bold, red
الحاويات
عنصرُ <Text>
فريدٌ (unique) بالنسبة إلى التخطيط (relative to layout): لم يعد كل شيء بداخله يستخدم تخطيط flexbox بل يستخدم تخطيط النص. هذا يعني أن العناصر الموجودة داخل عنصر <Text>
لم تعد مستطيلة الشكل، ولكنها تلتف (wrap) عندما تصل إلى نهاية السطر.
<Text>
<Text>First part and </Text>
<Text>second part</Text>
</Text>
// حاوية
// Text
// سيكون النص في نفس السطر إن سمحت المساحة بذلك
// |First part and second part|
// إن نفِدَت المساحة، فسيتصرف النص وكأنه كتلة واحدة
// |First part |
// |and second |
// |part |
<View>
<Text>First part and </Text>
<Text>second part</Text>
</View>
// حاوية
// View
// كل نصّ يُعدّ كتلة منفصلة
// |First part and|
// |second part |
// إن نفِدَت المساحة، سيجري النص داخل كتلته الخاصة
// |First part |
// |and |
// |second part|
وراثة أنماط محدودة
على الويب، الطريقة المعتادة لتعيين خطٍّ وحجم خطٍّ للمستند بأكمله هي الاستفادة من خصائص CSS الموروثة كما يلي:
html {
font-family: 'lucida grande', tahoma, verdana, arial, sans-serif;
font-size: 11px;
color: #141823;
}
سوف ترث جميع العناصر الموجودة في المستند هذا الخط ما لم تُحدِّد هي (أي العناصر) أو أحد عناصرها الأجداد قاعدةً جديدة.
في React Native، الأمر أشدّ صرامة، إذ عليك تغليف جميع العقد النصية (text nodes) داخل مكوّن<Text>
. لا يمكن وضع عقدة نصية مباشرة أسفل مكوّن <View>
.
// سيرمي هذا خطأً، لا يمكن وضع عقدة نصية داخل المكون
// <View>
<View>
Some text
</View>
// هذا هو الصواب
<View>
<Text>
Some text
</Text>
</View>
ستفقد أيضًا القدرة على تعيين خطٍّ افتراضيّ لشجرة فرعية بالكامل. و الخاصيّة fontFamily
لا تقبل سوى اسم خط واحد، وهذا مختلف عن الخاصية font-family
في CSS. الطريقة الموصى بها لاستخدام خطوطٍ وأحجامٍ موحّدة عبر تطبيقك هي إنشاء مكوّن باسم MyAppText
مثلًا يتضمن هذه الخاصيات واستخدام هذا المكون في تطبيقك. يمكنك أيضًا استخدام هذا المكون لإنشاء مكونات أكثر تحديدًا مثل مكوّنِ MyAppHeaderText
لأنواع أخرى من النصوص.
<View>
<MyAppText>
Text styled with the default font for the entire application
</MyAppText>
<MyAppHeaderText>Text styled as a header</MyAppHeaderText>
</View>
بافتراض أن MyAppText
مكونٌ لا يعرض سوى مكوناته الأبناء داخل مُكون Text
مع تنسيق محدّد، فيمكن تعريف المكوّن MyAppHeaderText
على النحو التالي:
class MyAppHeaderText extends Component {
render() {
return (
<MyAppText>
<Text style={{fontSize: 20}}>{this.props.children}</Text>
</MyAppText>
);
}
}
تركيب المكوّن MyAppText
بهذه الطريقة يضمن الحصول على الأنماط من أحد مكوّنات المستوى الأعلى، مع إمكانية تعديلها أو إضافة أنماط جديدة في حالات استخدامٍ محددة.
مفهوم وراثة الأنماط ما زال موجودًا في React Native، ولكنّه يقتصر على أشجار النصوص الفرعيّة (text subtrees). في هذه الحالة، سيكون الجزء الثاني غامقًا وأحمرًا:
<Text style={{fontWeight: 'bold'}}>
I am bold
<Text style={{color: 'red'}}>and red</Text>
</Text>
نعتقد أن هذه الطريقة الأكثر تقييدًا لتنسيق النصوص ستوفر تطبيقاتٍ أفضل:
- (المطور) صُمِّمَت مكوّنات React مع أخذ العزل التام بعين الاعتبار: يجب أن تكون قادرًا على إسقاط مكون في أي مكان في تطبيقك، واثقًا من أنه طالما أن الخاصيّات متشابهة، فستبدو وتتصرف بنفس الطريقة. خصائص النصوص القادرة على الوراثة من خارج الخاصيات ستكسر هذا العزل.
- (المُطبِّق [Implementor]) تطبيق شيفرة React Native تُبسَّط كذلك. لا نحتاج إلى حقلِ
fontFamily
في كل عنصرٍ، ولا نحتاج إلى عبور الشجرة إلى الجذر في كل مرة تُعرَض فيها عقدة نصية. لا تُشفَّر وراثة النمط إلا داخل مكون النص الأصيل ولا يُسرَّبُ إلى مُكوِّنات أخرى أو إلى النظام نفسه.
الخاصيات
accessible
عندما تكون قيمتُها القيمةَ true
، فهذا يُشير إلى أنّ العرضَ هو عنصرُ إمكانيةِ الوصول (accessibility element). افتراضيًّا، جميع العناصر القابلة للمس هي عناصر إمكانية وصول.
النوع | مطلوب |
---|---|
قيمة منطقيّة | لا |
accessibilityLabel
يستبدِل النص الذي يقرأه قارئ الشاشة عندما يتفاعل المستخدم مع العنصر. افتراضيًا، يُنشأ الملصق (label) عن طريق العبور عبر جميع المكوّنات الأبناء وتجميع كافة العقد النصية مفصولةً بمسافة.
النوع | مطلوب |
---|---|
سلسلة نصيّة | لا |
accessibilityHint
يُساعد تلميح إمكانية الوصول (accessibility hint) المستخدمينَ على فهم ما سيحدث عندما يقومون بإجراءٍ على عنصر إمكانية الوصول عندما لا تكون النتيجة واضحةً من مُلصَق إمكانية الوصول.
النوع | مطلوب |
---|---|
سلسلة نصيّة | لا |
accessibilityRole
تقوم الخاصيّة accessibilityRole
بتوصيل الغرض من المكون (أي دَوره) إلى مُستخدمِ تقنيةٍ مساعدة (assistive technology).
يُمكن للخاصيّة accessibilityRole
أن تحمل أحد القيم التالية:
-
'none'
- تُستخدَم عندما لا يكون للعنصر أي دور. -
'button'
- تستخدم عندما تجب معاملة العنصر كزر. -
'link'
- تستخدم عندما تجب معاملة العنصر كرابط. -
'search'
- تستخدم عندما تجب معاملة عنصر حقل النص كعنصر بحث كذلك. -
'image'
- تستخدم عندما تجب معاملة العنصر كصورة. يمكن دمجها مع زرٍ أو رابطٍ مثلا. -
'keyboardkey'
- تستخدم عندما يتصرَّف العنصرُ كمفتاح لوحة مفاتيح. -
'text'
- تستخدم عندما تجب معاملة العنصر كنص ثابت لا يمكن تغييره. -
'adjustable'
- تستخدم عندما يمكن "تعديل" العنصر (مثل شريط تمريرٍ [slider]). -
'imagebutton'
- تستخدم عندما تجب معاملة العنصر كزرٍ مع كونِه صورة في نفس الوقت. -
'header'
- تستخدم عندما يتصرف عنصرٌ كترويسةٍ (header) لقسمِ محتوى (كعنوان شريط التنقل). -
'summary'
- تستخدم عندما يمكن استخدام عنصر ما لتقديم ملخص سريع للظروف الحالية في التطبيق عند بدء تشغيل التطبيق لأول مرة. -
'alert'
- تستخدم عندما يحتوي عنصر على نص مهم لعرضه للمستخدم. -
'checkbox'
- تستخدم عندما يمثل عنصر مربعًا يمكن تحديده أو إلغاء تحديده أو في حالة تحديد مختلطة. -
'combobox'
- تستخدم عندما يمثل عنصر مربع تحرير وسرد (combo box)، مما يسمح للمستخدم بالاختيار من بين عدة خيارات. -
'menu'
- تستخدم عندما يكون المكون قائمةً من الخيارات. -
'menubar'
- تستخدم عندما يكون المكون عبارة عن حاوية متعددة القوائم. -
'menuitem'
- تستخدم لتمثيل عنصرٍ داخل قائمة. -
'progressbar'
- تستخدم لتمثيل مكون يشير إلى تقدم المهمة (شريط تقدم). -
'radio'
- تستخدم لتمثيل زر اختيار. -
'radiogroup'
- تستخدم لتمثيل مجموعة من أزرار الاختيار. -
'scrollbar'
- تستخدم لتمثيل شريط تمرير. -
'spinbutton'
- تستخدم لتمثيل زر يفتح قائمة من الخيارات. -
'switch'
- تستخدم لتمثيل مُحوِّلة يمكن تشغيلها وإيقاف تشغيلها. -
'tab'
- تستخدم لتمثيل علامة تبويب. -
'tablist'
- تستخدم لتمثيل قائمة من علامات التبويب. -
'timer'
- تستخدم لتمثيل مؤقت. -
'toolbar'
- تستخدم لتمثيل شريط أدوات (حاوية من أزرارٍ ومكوّنات إجراءات).
النوع | مطلوب |
---|---|
سلسلة نصيّة | لا |
accessibilityState
تصف الحالة الحالية لمكوّنٍ ما لمستخدمِ تقنيةٍ مساعدة.
انظر دليل إمكانية الوصول لمزيد من المعلومات.
النوع | مطلوب |
---|---|
object: {disabled: bool, selected: bool, checked: bool or 'mixed', busy: bool, expanded: bool}
|
لا |
adjustsFontSizeToFit
تُحدِّد ما إذا كان يجب تصغير الخطوط تلقائيًا لتناسب قيود النمط المُعطاة.
النوع | مطلوب | المنصة |
---|---|---|
قيمة منطقيّة | لا | iOS |
allowFontScaling
لتحديد ما إذا كان يجب تغيير حجم الخطوط لاحترام إعدادات حجم النص الخاصة بإمكانية الوصول. القيمة الافتراضية هي true
.
النوع | مطلوب |
---|---|
قيمة منطقيّة | لا |
dataDetectorType
يُحدِّد أنواع البيانات المحوَّلَة إلى عناوين URL قابلةٍ للنقر في عنصر النص. افتراضيًا، لا يتم اكتشاف أي أنواع بيانات.
يمكنك تحديد نوع واحد فقط.
القيم المحتملة للخاصيّة dataDetectorType
هي:
'phoneNumber'
'link'
'email'
'none'
'all'
النوع | مطلوب | المنصة |
---|---|---|
enum('phoneNumber', 'link', 'email', 'none', 'all')
|
لا | Android |
disabled
يُحدّد الحالة المعطلة لعرض النص لأغراض الاختبار.
النوع | مطلوب | المنصة |
---|---|---|
قيمة منطقيّة | لا | Android |
ellipsizeMode
عندما تُعيَّن قيمة للخاصيّة numberOfLines
، فإنّ هذه الخاصيَّة تُحدِّد كيفية اقتطاع النص. يجب تعيين قيمة للخاصيّة numberOfLines
بالتزامن مع هذه الخاصيّة.
يمكن أن تحمل أحد القيم التالية:
-
head
: يُعرَض السطر بحيث توضع النهاية في الحاوية ويتم الإشارة إلى النص المفقود في بداية السطر بواسطة علامة إضمار. أي ...wxyz
مثلا. -
middle
: يُعرض السطر بحيث يتم احتواء البداية والنهاية في الحاوية ويتم الإشارة إلى النص المفقود في المنتصف بواسطة علامة إضمار. أي ab...yz
مثلا. -
tail
: يتم عرض السطر بحيث يتم احتواء البداية في الحاوية ويتم الإشارة إلى النص المفقود في نهاية السطر بواسطة علامة إضمار. أي abcd...
مثلا. -
clip
: لا يتم رسم الأسطر بعد حافة حاوية النص.
القيمة الافتراضيّة هي tail
.
النوع | مطلوب |
---|---|
enum('head', 'middle', 'tail', 'clip')
|
لا |
maxFontSizeMultiplier
يُحدد أكبر مقياس ممكن يمكن أن يصل إليه الخط عند تمكين الخاصيّة allowFontScaling
. القيم الممكنة:
-
null/undefined
: (القيمة الافتراضية): ترث من العقدة الأب أو القيمة الافتراضيّة العامّة (0
).
-
0
: لا حدَّ أقصى، وتَجاهَل قيمة الأب أو القيمة الافتراضية العامّة.
-
>= 1
: تُعيِّن قيمةَ الخاصيّةِ maxFontSizeMultiplier
الخاصة بهذه العقدة إلى هذه القيمة.
النوع | مطلوب |
---|---|
عدد | لا |
minimumFontScale
يُحدِّد أصغر مقياس ممكن يمكن أن يصل إليه الخط عند تمكين الخاصية adjustsFontSizeToFit
. (القيم من 0.01
إلى 1.0
).
النوع | مطلوب | المنصة |
---|---|---|
عدد | لا | iOS |
nativeID
تُستخدَم لتحديد موقع هذا العرض من الشيفرة الأصيلة.
النوع | مطلوب |
---|---|
سلسلة نصيّة | لا |
numberOfLines
تُستخدم لاقتطاع النص باستخدام علامة إضمار بعد حساب تخطيط النص، بما في ذلك التفاف الأسطر، بحيث لا يتجاوز العدد الإجمالي للخطوط هذا العدد.
تُستخدم هذه الخاصيّة بشكل شائع مع الخاصية ellipsizeMode
.
النوع | مطلوب |
---|---|
عدد | لا |
onLayout
دالةٌ تُستدعى عند حدوث تغيّرات التركيب والتخطيط مع الحدث {nativeEvent: {layout: {x, y, width, height}}}
.
النوع | مطلوب |
---|---|
دالة | لا |
onLongPress
تُستدعى هذه الدالة عند الضغط لفترة طويلة. يمكن استعمالها على الشكل التالي مثًلا: onLongPress={this.increaseSize}>
.
النوع | مطلوب |
---|---|
دالة | لا |
onMoveShouldSetResponder
هل هذا العرض "يتطلّب" الاستجابة للّمس (touch responsiveness)؟ تُستدعى هذه الدالة في كل حركة لمسٍ على المكوّن View
عندما لا يكون المستجيب (the responder).
View.props.onMoveShouldSetResponder: (event) => [true | false]
، بحيثُ يكون event
حدثَ لمسٍ اصطناعي (synthetic touch event) كما هو موضح أعلاه.
النوع | مطلوب |
---|---|
دالة | لا |
onPress
تُستدعى هذه الدالة عند الضغط على العرض. يمكن استخدامها مثلًا بالشكل التالي: onPress={() => console.log('1st')}
.
النوع | مطلوب |
---|---|
دالة | لا |
onResponderGrant
يستجيب العرض الآن لأحداث اللمس. هذا هو الوقت المناسب لإبراز وإظهار ما يحدث للمستخدم. مثال: View.props.onResponderGrant: (event) => {}
، بحيث يكون event
حدثَ لمسٍ اصطناعيّ كما هو موضح أعلاه.
النوع | مطلوب |
---|---|
دالة | لا |
onResponderMove
عندما يُحرِّك المستخدمُ إصبعه. مثال: View.props.onResponderMove: (event) => {}
، بحيث يكون event
حدثَ لمسٍ اصطناعيّ كما هو موضح أعلاه.
النوع | مطلوب |
---|---|
دالة | لا |
onResponderRelease
دالةٌ تُستدعى عند نهاية اللمس. مثال: View.props.onResponderRelease: (event) => {}
، بحيث يكون event
حدثَ لمسٍ اصطناعيّ كما هو موضح أعلاه.
النوع | مطلوب |
---|---|
دالة | لا |
onResponderTerminate
دالةٌ تُستدعى عندما يُأخَذ المستجيب من العرض. قد تأخذه عروض أخرى بعد استدعاء onResponderTerminationRequest
، أو قد يأخذه نظام التشغيل دون طلب (يحدث هذا مع مركز التحكم أو مركز التنبيهات على iOS مثلًا)
مثال: View.props.onResponderTerminate: (event) => {}
، بحيث يكون event
حدثَ لمسٍ اصطناعيّ كما هو موضح أعلاه.
النوع | مطلوب |
---|---|
دالة | لا |
onResponderTerminationRequest
دالة تُستدعى عندما يريد عرضٌ آخر أن يصبح مستجيبًا ويطلب من هذا العرض تحرير المستجيب الخاص به. إعادة القيمة true
يسمح بإطلاقه.
مثال: View.props.onResponderTerminationRequest: (event) => {}
، بحيث يكون event
حدثَ لمسٍ اصطناعيّ كما هو موضح أعلاه.
النوع | مطلوب |
---|---|
دالة | لا |
onStartShouldSetResponderCapture
إذا أراد مُكوِّن View
منع مُكوِّنِ View
ابنٍ من أن يصبح مستجيبًا عند بداية اللمس، فيجب أن يحتويَ على هذا المعالج مُعيدًا القيمة true
.
مثال: View.props.onStartShouldSetResponderCapture: (event) => [true | false]
، بحيث يكون event
حدثَ لمسٍ اصطناعيّ كما هو موضح أعلاه.
النوع | مطلوب |
---|---|
دالة | لا |
onTextLayout
…
pressRetentionOffset
عند تعطيل عرض التمرير (scroll view)، تُحدِّد هذه الخاصيّة مدى المسافة التي يمكن أن تتحرك بها اللمسة بعيدًا عن الزر قبل إلغاء تنشيطه. بمجرد إلغاء تنشيط الزر، حاول تحريك لمستك للخلف وسترى أن الزر قد نُشِّطَ مرة أخرى! حركه للخلف وللأمام عدة مرات أثناء تعطيل عرض التمرير. تأكد من تمرير ثابتٍ لتقليل تخصيصات الذاكرة.
النوع | مطلوب |
---|---|
object: {top: number, left: number, bottom: number, right: number}
|
لا |
selectable
يتيح للمستخدم تحديد النص لاستخدام وظيفة النسخ واللصق الأصيلتين.
النوع | مطلوب |
---|---|
قيمة منطقيّة | لا |
selectionColor
لون إبراز (highlight color) النص.
النوع | مطلوب | المنصة |
---|---|---|
لون | لا | Android |
style
النوع | مطلوب |
---|---|
تنسيق | لا |
- خاصيّات تنسيق المكوّن
View
... -
textShadowOffset
: كائن، {width: number,height: number}
-
color
: لون. -
fontSize
: عدد. -
fontStyle
: ثابت متعدد، .enum('normal', 'italic')
-
fontWeight
: ثابت متعدد، enum('normal', 'bold', '100', '200', '300', '400', '500', '600', '700', '800', '900')
.
تُحدد وزن الخط. القيمتان 'normal'
و'bold'
مدعومتان من طرف معظم الخطوط. لا تحتوي جميع الخطوط على نسخةٍ لكل من القيم العدديّة، وفي هذه الحالة يتم اختيار الوزن الأقرب.
-
lineHeight
: عدد. -
textAlign
: ثابت متعدد، enum('auto', 'left', 'right', 'center', 'justify')
. يحدد محاذاة النص. القيمة justify
مدعومة فقط على iOS و Android Oreo (النسخة 8.0) أو أعلى (المستوى 26 أو أعلى من واجهة التطبيقات البرمجيّة). في نسخ Android الأقدم، سوف تعود القيمة إلى left
.
-
textDecorationLine
: ثابت متعدد، enum('none', 'underline', 'line-through', 'underline line-through')
. -
textShadowColor
: لون. -
fontFamily
: سلسلة نصيّة. -
textShadowRadius
: عدد. -
includeFontPadding
: قيمة منطقيّة (Android). عيّن لها القيمة false
لإزالة حشوة الخطوط الإضافية (extra font padding) المُخصَّصة لتوفير مساحةٍ لبعض الحروف الصاعدة (ascenders) والنازلة (descenders). في بعض الخطوط، يمكن لهذه الحشوة أن تجعل النص يبدو غير محاذٍ قليلاً عند توسيطه رأسياً. للحصول على أفضل النتائج، عيِّن كذلك القيمة center
للخاصيّة textAlignVertical
. القيمة الافتراضيّة هي true
.
-
textAlignVertical
: ثابت متعدد (Android)، enum('auto', 'top', 'bottom', 'center')
.
-
fontVariant
: مصفوفة من الثوابت المتعدّدة (iOS)، enum('small-caps', 'oldstyle-nums', 'lining-nums', 'tabular-nums', 'proportional-nums')
. -
letterSpacing
: عدد. زيادة أو تقليل التباعد بين الأحرف. القيمة الافتراضية هي0
، والتي تعني عدم وجود أيّ مسافات إضافية بين الأحرف.
على iOS: سيتم تصيير المساحة الإضافية بعد كل حرف رسومي (glyph).
على Android: مدعوم فقط منذ Android 5.0 - ستتجاهل الإصدارات الأقدم هذه السِّمة. لاحظ أنه ستُضافُ مساحة إضافية حول الحروف الرسومية (نصفُ المساحة على كل جانب)، والذي يختلف عن طريقة التصيير في iOS. من الممكن محاكاة تصيير iOS باستخدام سمات التخطيط (layout attributes)، كالهوامش السلبية (negative margins) مثلًا، وذلك حسب ما يُناسبك.
-
textDecorationColor
: لون (iOS)
-
textDecorationStyle
:ثابت متعدد (iOS)، enum('solid', 'double', 'dotted', 'dashed')
. -
textTransform
:ثابت متعدد، enum('none', 'uppercase', 'lowercase', 'capitalize')
. -
writingDirection
:ثابت متعدد (iOS)، enum('auto', 'ltr', 'rtl')
.
suppressHighlighting
عندما تكون قيمتها القيمةَ true
، لا يُجرى أي تغيير مرئي عند الضغط على النص. افتراضيًا، يُبرِز شكلٌ بيضاوي رمادي النصَّ عند الضغط لأسفل.
النوع | مطلوب | المنصة |
---|---|---|
قيمة منطقيّة | لا | iOS |
testID
يُستخدَم لتحديد موقع هذا العرض في الاختبارات الشاملة (end-to-end tests).
النوع | مطلوب |
---|---|
سلسلة نصيّة | لا |
textBreakStrategy
عيّن استراتيجية فاصل النص (text break) على المستوى 23 من واجهة برمجة تطبيقات Android أو أحدث، القيم المحتملة هي: highQuality
، simple
(القيمة الافتراضية)، balanced
.
النوع | مطلوب | المنصة |
---|---|---|
enum('simple', 'highQuality', 'balanced')
|
لا | Android |
مشاكل معروفة
react-native#22811: لا تدعم عناصر النص المتداخلة سمَة numberOfLines
.