الفرق بين المراجعتين ل"ReactNative/text"

من موسوعة حسوب
اذهب إلى التنقل اذهب إلى البحث
ط (مراجعة)
سطر 1: سطر 1:
<noinclude>{{DISPLAYTITLE: Text في React Native}}</noinclude>
+
<noinclude>{{DISPLAYTITLE:المكون Text في React Native}}</noinclude>
مكوّن React لعرض النصوص.
+
مكوّن [[React]] لعرض النصوص.
  
 
يدعم المكوّن ‎‎<code>Text</code>‎‎ النصوص المتداخلة والتنسيق ومعالجة اللمسات.
 
يدعم المكوّن ‎‎<code>Text</code>‎‎ النصوص المتداخلة والتنسيق ومعالجة اللمسات.
سطر 6: سطر 6:
 
في المثال التالي، يرث العنوان المتداخل والنص الأساسي خاصيّة <code>fontFamily</code> من ‎‎<code>styles.baseText</code>‎‎، لكن العنوان يوفّر أنماطا إضافية خاصة به. سيتم تكديس العنوان والنص الأساسي فوق بعضهما البعض عند الوصول إلى محارف الأسطر الجديدة (literal newlines):
 
في المثال التالي، يرث العنوان المتداخل والنص الأساسي خاصيّة <code>fontFamily</code> من ‎‎<code>styles.baseText</code>‎‎، لكن العنوان يوفّر أنماطا إضافية خاصة به. سيتم تكديس العنوان والنص الأساسي فوق بعضهما البعض عند الوصول إلى محارف الأسطر الجديدة (literal newlines):
  
 +
* [https://snack.expo.dev/@hsoubwiki/text-functional-component-example مثال لمكون دالة (Function Component):]
 
<syntaxhighlight lang="javascript">
 
<syntaxhighlight lang="javascript">
import React, { Component } from 'react';
+
import React, { useState } from "react";
import { Text, StyleSheet } from 'react-native';
+
import { Text, StyleSheet } from "react-native";
 +
 
 +
const TextInANest = () => {
 +
  const [titleText, setTitleText] = useState("Bird's Nest");
 +
  const bodyText = "This is not really a bird nest.";
 +
 
 +
  const onPressTitle = () => {
 +
    setTitleText("Bird's Nest [pressed]");
 +
  };
 +
 
 +
  return (
 +
    <Text style={styles.baseText}>
 +
      <Text style={styles.titleText} onPress={onPressTitle}>
 +
        {titleText}
 +
        {"\n"}
 +
        {"\n"}
 +
      </Text>
 +
      <Text numberOfLines={5}>{bodyText}</Text>
 +
    </Text>
 +
  );
 +
};
 +
 
 +
const styles = StyleSheet.create({
 +
  baseText: {
 +
    fontFamily: "Cochin"
 +
  },
 +
  titleText: {
 +
    fontSize: 20,
 +
    fontWeight: "bold"
 +
  }
 +
});
 +
 
 +
export default TextInANest;
 +
</syntaxhighlight>
 +
 
 +
* [https://snack.expo.dev/@hsoubwiki/text-class-component-example مثال لمكون صنف (Class Component):]
 +
<syntaxhighlight lang="javascript">
 +
import React, { Component } from "react";
 +
import { Text, StyleSheet } from "react-native";
  
export default class TextInANest extends Component {
+
class TextInANest extends Component {
 
   constructor(props) {
 
   constructor(props) {
 
     super(props);
 
     super(props);
 
     this.state = {
 
     this.state = {
 
       titleText: "Bird's Nest",
 
       titleText: "Bird's Nest",
       bodyText: 'This is not really a bird nest.'
+
       bodyText: "This is not really a bird nest."
 
     };
 
     };
 
   }
 
   }
 +
 +
  onPressTitle = () => {
 +
    this.setState({ titleText: "Bird's Nest [pressed]" });
 +
  };
  
 
   render() {
 
   render() {
 
     return (
 
     return (
 
       <Text style={styles.baseText}>
 
       <Text style={styles.baseText}>
         <Text style={styles.titleText} onPress={this.onPressTitle}>
+
         <Text
           {this.state.titleText}{'\n'}{'\n'}
+
          style={styles.titleText}
        </Text>
+
          onPress={this.onPressTitle}
        <Text numberOfLines={5}>
+
        >
          {this.state.bodyText}
+
           {this.state.titleText}
 +
          {"\n"}
 +
          {"\n"}
 
         </Text>
 
         </Text>
 +
        <Text numberOfLines={5}>{this.state.bodyText}</Text>
 
       </Text>
 
       </Text>
 
     );
 
     );
سطر 35: سطر 81:
 
const styles = StyleSheet.create({
 
const styles = StyleSheet.create({
 
   baseText: {
 
   baseText: {
     fontFamily: 'Cochin',
+
     fontFamily: "Cochin"
 
   },
 
   },
 
   titleText: {
 
   titleText: {
 
     fontSize: 20,
 
     fontSize: 20,
     fontWeight: 'bold',
+
     fontWeight: "bold"
   },
+
   }
 
});
 
});
 +
 +
export default TextInANest;
 
</syntaxhighlight>
 
</syntaxhighlight>
 
==النصوص المتداخلة==
 
==النصوص المتداخلة==
 
يتيح كل من نظامي iOS وAndroid عرض نص منسق عن طريق التعليق (annotating) على نطاقاتِ سلسلةٍ نصيّة بتنسيقات محددة لجعله نصًّا غامقًا أو ملونًا مثلًا (‎‎<code>NSAttributedString</code>‎‎ على iOS و‎‎<code>SpannableString</code>‎‎ على Android). عمليًّا، هذا شاق للغاية. في React Native، يُمكن استخدام صيغة الويب لهذا الغرض، حيث يمكنك تدخيل النص لتحقيق التأثير نفسه.
 
يتيح كل من نظامي iOS وAndroid عرض نص منسق عن طريق التعليق (annotating) على نطاقاتِ سلسلةٍ نصيّة بتنسيقات محددة لجعله نصًّا غامقًا أو ملونًا مثلًا (‎‎<code>NSAttributedString</code>‎‎ على iOS و‎‎<code>SpannableString</code>‎‎ على Android). عمليًّا، هذا شاق للغاية. في React Native، يُمكن استخدام صيغة الويب لهذا الغرض، حيث يمكنك تدخيل النص لتحقيق التأثير نفسه.
 +
 +
إليك المثال التالي ([https://snack.expo.dev/@hsoubwiki/nested-text-example تجربة حية]):
 
<syntaxhighlight lang="javascript">
 
<syntaxhighlight lang="javascript">
import React, { Component } from 'react';
+
import React from 'react';
import { Text } from 'react-native';
+
import { Text, StyleSheet } from 'react-native';
  
export default class BoldAndBeautiful extends Component {
+
const BoldAndBeautiful = () => {
  render() {
+
  return (
    return (
+
    <Text style={styles.baseText}>
      <Text style={{fontWeight: 'bold'}}>
+
      I am bold
        I am bold
+
      <Text style={styles.innerText}> and red</Text>
        <Text style={{color: 'red'}}>
+
    </Text>
          and red
+
  );
        </Text>
+
};
      </Text>
+
 
    );
+
const styles = StyleSheet.create({
 +
  baseText: {
 +
    fontWeight: 'bold'
 +
  },
 +
  innerText: {
 +
    color: 'red'
 
   }
 
   }
}
+
});
 +
 
 +
export default BoldAndBeautiful;
 
</syntaxhighlight>
 
</syntaxhighlight>
 
وراء الكواليس، يُحوِّل React Native هذا إلى سلسلة <code>NSAttributedString</code> نصيّة مسطحة أو سلسلة <code>SpannableString</code> نصيّة تحتوي على المعلومات التالية:
 
وراء الكواليس، يُحوِّل React Native هذا إلى سلسلة <code>NSAttributedString</code> نصيّة مسطحة أو سلسلة <code>SpannableString</code> نصيّة تحتوي على المعلومات التالية:
سطر 71: سطر 128:
  
 
==الحاويات==
 
==الحاويات==
عنصرُ ‎‎<code><Text></code>‎‎ فريدٌ (unique) بالنسبة إلى التخطيط (relative to layout): لم يعد كل شيء بداخله يستخدم تخطيط flexbox بل يستخدم تخطيط النص. هذا يعني أن العناصر الموجودة داخل عنصر ‎‎<code><Text></code>‎‎ لم تعد مستطيلة الشكل، ولكنها تلتف (wrap) عندما تصل إلى نهاية السطر.
+
عنصرُ ‎‎<code><Text></code>‎‎ فريدٌ (unique) بالنسبة إلى التخطيط (relative to layout): لم يعد كل شيء بداخله يستخدم تخطيط [[CSS/flex|flexbox]] بل يستخدم تخطيط النص. هذا يعني أن العناصر الموجودة داخل عنصر ‎‎<code><Text></code>‎‎ لم تعد مستطيلة الشكل، ولكنها تلتف (wrap) عندما تصل إلى نهاية السطر.
  
 
<syntaxhighlight lang="javascript">
 
<syntaxhighlight lang="javascript">
سطر 78: سطر 135:
 
   <Text>second part</Text>
 
   <Text>second part</Text>
 
</Text>
 
</Text>
// حاوية
+
// Text حاوية
// Text
 
 
// سيكون النص في نفس السطر إن سمحت المساحة بذلك
 
// سيكون النص في نفس السطر إن سمحت المساحة بذلك
 
// |First part and second part|
 
// |First part and second part|
سطر 93: سطر 149:
 
</View>
 
</View>
  
// حاوية
+
// View حاوية
// View
 
 
// كل نصّ يُعدّ كتلة منفصلة
 
// كل نصّ يُعدّ كتلة منفصلة
  
سطر 106: سطر 161:
 
</syntaxhighlight>
 
</syntaxhighlight>
 
==وراثة أنماط محدودة==
 
==وراثة أنماط محدودة==
على الويب، الطريقة المعتادة لتعيين خطٍّ وحجم خطٍّ للمستند بأكمله هي الاستفادة من خصائص CSS الموروثة كما يلي:
+
على الويب، الطريقة المعتادة لتعيين خطٍّ وحجم خطٍّ للمستند بأكمله هي الاستفادة من خصائص [[CSS]] الموروثة كما يلي:
 
<syntaxhighlight lang="css">
 
<syntaxhighlight lang="css">
 
html {
 
html {
سطر 117: سطر 172:
 
سوف ترث جميع العناصر الموجودة في المستند هذا الخط ما لم تُحدِّد هي (أي العناصر) أو أحد عناصرها الأجداد قاعدةً جديدة.
 
سوف ترث جميع العناصر الموجودة في المستند هذا الخط ما لم تُحدِّد هي (أي العناصر) أو أحد عناصرها الأجداد قاعدةً جديدة.
  
في React Native، الأمر أشدّ صرامة، إذ عليك تغليف جميع العقد النصية (text nodes) داخل مكوّن‎‎<code><Text></code>‎‎. لا يمكن وضع عقدة نصية مباشرة أسفل مكوّن ‎‎<code><View></code>‎‎.
+
في React Native، الأمر أشدّ صرامة، إذ عليك تغليف جميع العقد النصية (text nodes) داخل مكوّن ‎‎<code><Text></code>‎‎. لا يمكن وضع عقدة نصية مباشرة أسفل مكوّن ‎‎<code><View></code>‎‎.
 
<syntaxhighlight lang="javascript">
 
<syntaxhighlight lang="javascript">
 
// سيرمي هذا خطأً، لا يمكن وضع عقدة نصية داخل المكون
 
// سيرمي هذا خطأً، لا يمكن وضع عقدة نصية داخل المكون
سطر 132: سطر 187:
 
</View>
 
</View>
 
</syntaxhighlight>
 
</syntaxhighlight>
ستفقد أيضًا القدرة على تعيين خطٍّ افتراضيّ لشجرة فرعية بالكامل. و الخاصيّة <code>fontFamily</code> لا تقبل سوى اسم خط واحد، وهذا مختلف عن الخاصية ‎‎<code>font-family</code>‎‎ في CSS. الطريقة الموصى بها لاستخدام خطوطٍ وأحجامٍ موحّدة عبر تطبيقك هي إنشاء مكوّن باسم ‎‎<code>MyAppText</code>‎‎ مثلًا يتضمن هذه الخاصيات واستخدام هذا المكون في تطبيقك. يمكنك أيضًا استخدام هذا المكون لإنشاء مكونات أكثر تحديدًا مثل مكوّنِ <code>MyAppHeaderText</code> لأنواع أخرى من النصوص.
+
ستفقد أيضًا القدرة على تعيين خطٍّ افتراضيّ لشجرة فرعية بالكامل. و الخاصيّة <code>fontFamily</code> لا تقبل سوى اسم خط واحد، وهذا مختلف عن الخاصية ‎‎<nowiki/>[[CSS/font-family|<code>font-family</code>‎‎]] في [[CSS]]. الطريقة الموصى بها لاستخدام خطوطٍ وأحجامٍ موحّدة عبر تطبيقك هي إنشاء مكوّن باسم ‎‎<code>MyAppText</code>‎‎ مثلًا يتضمن هذه الخاصيات واستخدام هذا المكون في تطبيقك. يمكنك أيضًا استخدام هذا المكون لإنشاء مكونات أكثر تحديدًا مثل مكوّنِ <code>MyAppHeaderText</code> لأنواع أخرى من النصوص.
 
<syntaxhighlight lang="javascript">
 
<syntaxhighlight lang="javascript">
 
<View>
 
<View>
سطر 148: سطر 203:
 
     return (
 
     return (
 
       <MyAppText>
 
       <MyAppText>
         <Text style={{fontSize: 20}}>{this.props.children}</Text>
+
         <Text style={{ fontSize: 20 }}>
 +
          {this.props.children}
 +
        </Text>
 
       </MyAppText>
 
       </MyAppText>
 
     );
 
     );
سطر 167: سطر 224:
 
* (المطور) صُمِّمَت مكوّنات React مع أخذ العزل التام بعين الاعتبار: يجب أن تكون قادرًا على إسقاط مكون في أي مكان في تطبيقك، واثقًا من أنه طالما أن الخاصيّات متشابهة، فستبدو وتتصرف بنفس الطريقة. خصائص النصوص القادرة على الوراثة من خارج الخاصيات ستكسر هذا العزل.
 
* (المطور) صُمِّمَت مكوّنات React مع أخذ العزل التام بعين الاعتبار: يجب أن تكون قادرًا على إسقاط مكون في أي مكان في تطبيقك، واثقًا من أنه طالما أن الخاصيّات متشابهة، فستبدو وتتصرف بنفس الطريقة. خصائص النصوص القادرة على الوراثة من خارج الخاصيات ستكسر هذا العزل.
  
* (المُطبِّق [Implementor]) تطبيق شيفرة React Native تُبسَّط كذلك. لا نحتاج إلى حقلِ <code>fontFamily</code> في كل عنصرٍ، ولا نحتاج إلى عبور الشجرة إلى الجذر في كل مرة تُعرَض فيها عقدة نصية. لا تُشفَّر وراثة النمط إلا داخل مكون النص الأصيل ولا يُسرَّبُ إلى مُكوِّنات أخرى أو إلى النظام نفسه.
+
* (المُطبِّق [Implementor]) تطبيق شيفرة React Native تُبسَّط كذلك: لا نحتاج إلى حقلِ <code>fontFamily</code> في كل عنصرٍ، ولا نحتاج إلى عبور الشجرة إلى الجذر في كل مرة تُعرَض فيها عقدة نصية. لا تُشفَّر وراثة النمط إلا داخل مكون النص الأصيل ولا يُسرَّبُ إلى مُكوِّنات أخرى أو إلى النظام نفسه.
  
 
==الخاصيات==
 
==الخاصيات==
 
===‎‎<code>accessible</code>‎‎===
 
===‎‎<code>accessible</code>‎‎===
عندما تكون قيمتُها القيمةَ ‎‎<code>true</code>‎‎، فهذا يُشير إلى أنّ العرضَ هو عنصرُ إمكانيةِ الوصول (accessibility element). افتراضيًّا، جميع العناصر القابلة للمس هي عناصر إمكانية وصول.
+
عندما تكون قيمتُها القيمةَ ‎‎<code>true</code>‎‎ (القيمة الافتراضية)، فهذا يُشير إلى أنّ العرضَ هو عنصرُ سهل الوصول (accessibility element) لمن يملك أي إعاقة (سواءً دائمة أو مؤقتة). افتراضيًّا، جميع العناصر القابلة للمس هي عناصر مهيأة لتكون سهلة الوصول.
 +
 
 +
انظر دليل [[ReactNative/accessibility|إمكانية الوصول]] لمزيد من المعلومات.
  
 
{| class="wikitable"
 
{| class="wikitable"
سطر 193: سطر 252:
 
===‎‎<code>accessibilityHint</code>‎‎===
 
===‎‎<code>accessibilityHint</code>‎‎===
  
يُساعد تلميح إمكانية الوصول (accessibility hint) المستخدمينَ على فهم ما سيحدث عندما يقومون بإجراءٍ على عنصر إمكانية الوصول عندما لا تكون النتيجة واضحةً من مُلصَق إمكانية الوصول.
+
يُساعد تلميح سهولة الوصول (accessibility hint) المستخدمينَ على فهم ما سيحدث عندما يقومون بإجراءٍ على عنصر مهيئأة ليكون سهل الوصول عندما لا تكون النتيجة واضحةً من العنوان المساعد لسهولة الوصول <code>accessibilityLabel</code>.
 
{| class="wikitable"
 
{| class="wikitable"
 
!النوع
 
!النوع
سطر 202: سطر 261:
 
|}
 
|}
 
===‎‎<code>accessibilityRole</code>‎‎===
 
===‎‎<code>accessibilityRole</code>‎‎===
تقوم الخاصيّة <code>accessibilityRole</code> بتوصيل الغرض من المكون (أي دَوره) إلى مُستخدمِ تقنيةٍ مساعدة (assistive technology).
+
تقوم الخاصيّة <code>accessibilityRole</code> بتوصيل الغرض من المكون (أي دَوره) إلى المستخدم عبر تقنيةٍ مساعدة (assistive technology) مثل قارئات الشاشة.
  
يُمكن للخاصيّة ‎‎<code>accessibilityRole</code>‎‎ أن تحمل أحد القيم التالية:
+
تترجم هذه الأدوار إلى تقنية Accessibility Traits المقابلة على نظام iOS. الزر Image يملك الوظيفة نفسها كما لو أن صفته (دوره) حُدِّد إلى 'image' أو 'button'. انظر دليل [[ReactNative/accessibility|سهولة الوصول]] لمزيد من التفاصيل.
  
* ‎‎<code>'none'</code>‎‎ - تُستخدَم عندما لا يكون للعنصر أي دور.
+
أما على نظام Android، فلهذه الأدوار قيمة مقابلة على تقنية TalkBack بالمثل كما في نظام iOS الذي تحدثنا عنه آنفًا.
* ‎‎<code>'button'</code>‎‎ - تستخدم عندما تجب معاملة العنصر كزر.
 
* ‎‎<code>'link'</code>‎‎ - تستخدم عندما تجب معاملة العنصر كرابط.
 
* ‎‎<code>'search'</code>‎‎  - تستخدم عندما تجب معاملة عنصر حقل النص كعنصر بحث كذلك.
 
* ‎‎<code>'image'</code>‎‎  -  تستخدم عندما تجب معاملة العنصر كصورة. يمكن دمجها مع زرٍ أو رابطٍ مثلا.
 
* ‎‎<code>'keyboardkey'</code>‎‎  -  تستخدم عندما يتصرَّف العنصرُ كمفتاح لوحة مفاتيح.
 
* ‎‎<code>'text'</code>‎‎  -  تستخدم عندما تجب معاملة العنصر كنص ثابت لا يمكن تغييره.
 
* ‎‎<code>'adjustable'</code>‎‎  - تستخدم عندما يمكن "تعديل" العنصر (مثل شريط تمريرٍ [slider]).
 
* ‎‎<code>'imagebutton'</code>‎‎  - تستخدم عندما تجب معاملة العنصر كزرٍ مع كونِه صورة في نفس الوقت.
 
* ‎‎<code>'header'</code>‎‎  - تستخدم عندما يتصرف عنصرٌ كترويسةٍ (header) لقسمِ محتوى (كعنوان شريط التنقل).
 
* ‎‎<code>'summary'</code>‎‎  - تستخدم عندما يمكن استخدام عنصر ما لتقديم ملخص سريع للظروف الحالية في التطبيق عند بدء تشغيل التطبيق لأول مرة.
 
* ‎‎<code>'alert'</code>‎‎  - تستخدم عندما يحتوي عنصر على نص مهم لعرضه للمستخدم.
 
* ‎‎<code>'checkbox'</code>‎‎  - تستخدم عندما يمثل عنصر مربعًا يمكن تحديده أو إلغاء تحديده أو في حالة تحديد مختلطة.
 
* ‎‎<code>'combobox'</code>‎‎  - تستخدم عندما يمثل عنصر مربع تحرير وسرد (combo box)، مما يسمح للمستخدم بالاختيار من بين عدة خيارات.
 
* ‎‎<code>'menu'</code>‎‎  - تستخدم عندما يكون المكون قائمةً من الخيارات.
 
* ‎‎<code>'menubar'</code>‎‎  - تستخدم عندما يكون المكون عبارة عن حاوية متعددة القوائم.
 
* ‎‎<code>'menuitem'</code>‎‎  -  تستخدم لتمثيل عنصرٍ داخل قائمة.
 
* ‎‎<code>'progressbar'</code>‎‎  -  تستخدم لتمثيل مكون يشير إلى تقدم المهمة (شريط تقدم).
 
* ‎‎<code>'radio'</code>‎‎  - تستخدم لتمثيل زر اختيار.
 
* ‎‎<code>'radiogroup'</code>‎‎  - تستخدم لتمثيل مجموعة من أزرار الاختيار.
 
* ‎‎<code>'scrollbar'</code>‎‎  - تستخدم لتمثيل شريط تمرير.
 
* ‎‎<code>'spinbutton'</code>‎‎  - تستخدم لتمثيل زر يفتح قائمة من الخيارات.
 
* ‎‎<code>'switch'</code>‎‎  - تستخدم لتمثيل مُحوِّلة يمكن تشغيلها وإيقاف تشغيلها.
 
* ‎‎<code>'tab'</code>‎‎  - تستخدم لتمثيل علامة تبويب.
 
* ‎‎<code>'tablist'</code>‎‎  - تستخدم لتمثيل قائمة من علامات التبويب.
 
* ‎‎<code>'timer'</code>‎‎  - تستخدم لتمثيل مؤقت.
 
* ‎‎<code>'toolbar'</code>‎‎  - تستخدم لتمثيل شريط أدوات (حاوية من أزرارٍ ومكوّنات إجراءات).
 
  
 
{| class="wikitable"
 
{| class="wikitable"
سطر 238: سطر 271:
 
!مطلوب
 
!مطلوب
 
|-
 
|-
|سلسلة نصيّة
+
|النوع [[ReactNative/accessibility#accessibilityRole|accessibilityRole]]
 
|لا
 
|لا
 
|}
 
|}
  
 
===‎‎<code>accessibilityState</code>‎‎===
 
===‎‎<code>accessibilityState</code>‎‎===
تصف الحالة الحالية لمكوّنٍ ما لمستخدمِ تقنيةٍ مساعدة.
+
تحدد قيمة هذه الخاصية التقنيةٍ المساعدة مثل قارئ الشاشة بحالة العنصر المحدد (المركز) عليه آنذاك، ويمكنك أن لا تحدد أي حالة أو تحدد حالة واحدة أو عدة حالات بتمريرها عبر كائن مثل <code>{selected: true, disabled: true}</code>.
 
 
انظر [https://wiki.hsoub.com/ReactNative/accessibility دليل إمكانية الوصول] لمزيد من المعلومات.
 
  
 
{| class="wikitable"
 
{| class="wikitable"
سطر 251: سطر 282:
 
!مطلوب
 
!مطلوب
 
|-
 
|-
|‎‎<code>object: {disabled: bool, selected: bool, checked: bool or 'mixed', busy: bool, expanded: bool}</code>‎‎
+
|[[ReactNative/accessibility#accessibilityState|AccessibilityState]]
 
|لا
 
|لا
 
|}
 
|}
 
===‎‎<code>adjustsFontSizeToFit</code>‎‎===
 
===‎‎<code>adjustsFontSizeToFit</code>‎‎===
تُحدِّد ما إذا كان يجب تصغير الخطوط تلقائيًا لتناسب قيود النمط المُعطاة.
+
تُحدِّد ما إذا كان يجب تصغير الخطوط تلقائيًا لتناسب قيود النمط المُعطاة. القيمة الافتراضية <code>false</code>.
 
{| class="wikitable"
 
{| class="wikitable"
 
!النوع
 
!النوع
سطر 276: سطر 307:
 
|}
 
|}
  
 +
=== <code>android_hyphenationFrequency</code> ===
 +
تحدد تكرار عملية فصل الكلمات الأجنبية بفاصلة (شرطة - ) التلقائية لتُستخدَم متى ما سُمِح بفصل الكلمات الواحدة بفاصل على واجهة Android API المستوى 23 وما بعد. القيمة الافتراضية 'none'.
 +
{| class="wikitable"
 +
!النوع
 +
!مطلوب
 +
!المنصة
 +
|-
 +
|('none', 'full', 'balanced', 'high')
 +
|لا
 +
|Android API Level 23+‎
 +
|}
 
===‎‎<code>dataDetectorType</code>‎‎===
 
===‎‎<code>dataDetectorType</code>‎‎===
 
يُحدِّد أنواع البيانات المحوَّلَة إلى عناوين URL قابلةٍ للنقر في عنصر النص. افتراضيًا، لا يتم اكتشاف أي أنواع بيانات.
 
يُحدِّد أنواع البيانات المحوَّلَة إلى عناوين URL قابلةٍ للنقر في عنصر النص. افتراضيًا، لا يتم اكتشاف أي أنواع بيانات.
سطر 281: سطر 323:
 
يمكنك تحديد نوع واحد فقط.
 
يمكنك تحديد نوع واحد فقط.
  
القيم المحتملة للخاصيّة ‎‎<code>dataDetectorType</code>‎‎ هي:
+
القيم المحتملة للخاصيّة ‎‎<code>dataDetectorType</code>‎‎ موضحة بالجدول. القيمة الافتراضية 'none'.
 
 
* <code>'phoneNumber'</code>
 
* <code>'link'</code>
 
* <code>'email'</code>
 
* <code>'none'</code>
 
* <code>'all'</code>
 
 
{| class="wikitable"
 
{| class="wikitable"
 
!النوع
 
!النوع
سطر 293: سطر 329:
 
!المنصة
 
!المنصة
 
|-
 
|-
|‎‎<code>enum('phoneNumber', 'link', 'email', 'none', 'all')</code>‎‎
+
|‎‎('phoneNumber', 'link', 'email', 'none', 'all')‎‎
 
|لا
 
|لا
 
|Android
 
|Android
 
|}
 
|}
 
===‎‎<code>disabled</code>‎‎===
 
===‎‎<code>disabled</code>‎‎===
يُحدّد الحالة المعطلة لعرض النص لأغراض الاختبار.
+
يُحدّد الحالة المعطلة لعرض النص لأغراض الاختبار. القيمة الافتراضية <code>false</code>.
  
 
{| class="wikitable"
 
{| class="wikitable"
سطر 317: سطر 353:
 
* ‎‎<code>head</code>‎‎: يُعرَض السطر بحيث توضع النهاية في الحاوية ويتم الإشارة إلى النص المفقود في بداية السطر بواسطة علامة إضمار. أي ‎‎<code>...wxyz</code>‎‎ مثلا.
 
* ‎‎<code>head</code>‎‎: يُعرَض السطر بحيث توضع النهاية في الحاوية ويتم الإشارة إلى النص المفقود في بداية السطر بواسطة علامة إضمار. أي ‎‎<code>...wxyz</code>‎‎ مثلا.
 
* ‎‎<code>middle</code>‎‎: يُعرض السطر بحيث يتم احتواء البداية والنهاية في الحاوية ويتم الإشارة إلى النص المفقود في المنتصف بواسطة علامة إضمار. أي ‎‎<code>ab...yz</code>‎‎ مثلا.
 
* ‎‎<code>middle</code>‎‎: يُعرض السطر بحيث يتم احتواء البداية والنهاية في الحاوية ويتم الإشارة إلى النص المفقود في المنتصف بواسطة علامة إضمار. أي ‎‎<code>ab...yz</code>‎‎ مثلا.
* ‎‎<code>tail</code>‎‎: يتم عرض السطر بحيث يتم احتواء البداية في الحاوية ويتم الإشارة إلى النص المفقود في نهاية السطر بواسطة علامة إضمار. أي ‎‎<code>abcd...</code>‎‎ مثلا.
+
* ‎‎<code>tail</code>‎‎: (القيمة الافتراضية) يتم عرض السطر بحيث يتم احتواء البداية في الحاوية ويتم الإشارة إلى النص المفقود في نهاية السطر بواسطة علامة إضمار. أي ‎‎<code>abcd...</code>‎‎ مثلا.
 
* ‎‎<code>clip</code>‎‎: لا يتم رسم الأسطر بعد حافة حاوية النص.
 
* ‎‎<code>clip</code>‎‎: لا يتم رسم الأسطر بعد حافة حاوية النص.
  
 
القيمة الافتراضيّة هي ‎‎<code>tail</code>‎‎.
 
القيمة الافتراضيّة هي ‎‎<code>tail</code>‎‎.
 +
 +
إن ضبط قيمة الخاصة numberOfLines في نظام Android إلى قيمة أعلى من 1، فلن تعمل سوى القيمة <code>'tail'</code> مع هذه الخاصية.
  
 
{| class="wikitable"
 
{| class="wikitable"
سطر 326: سطر 364:
 
!مطلوب
 
!مطلوب
 
|-
 
|-
|‎‎<code>enum('head', 'middle', 'tail', 'clip')</code>‎‎
+
|‎‎('head', 'middle', 'tail', 'clip')‎‎
 
|لا
 
|لا
 
|}
 
|}
سطر 375: سطر 413:
 
تُستخدم لاقتطاع النص باستخدام علامة إضمار بعد حساب تخطيط النص، بما في ذلك التفاف الأسطر، بحيث لا يتجاوز العدد الإجمالي للخطوط هذا العدد.
 
تُستخدم لاقتطاع النص باستخدام علامة إضمار بعد حساب تخطيط النص، بما في ذلك التفاف الأسطر، بحيث لا يتجاوز العدد الإجمالي للخطوط هذا العدد.
  
تُستخدم هذه الخاصيّة بشكل شائع مع الخاصية ‎‎<code>ellipsizeMode</code>‎‎.
+
تُستخدم هذه الخاصيّة بشكل شائع مع الخاصية ‎‎<code>ellipsizeMode</code>‎‎. القيمة الافتراضية 0.
 
{| class="wikitable"
 
{| class="wikitable"
 
!النوع
 
!النوع
سطر 384: سطر 422:
 
|}
 
|}
 
===‎‎<code>onLayout</code>‎‎===
 
===‎‎<code>onLayout</code>‎‎===
دالةٌ تُستدعى عند حدوث تغيّرات التركيب والتخطيط مع الحدث ‎‎<code><nowiki>{nativeEvent: {layout: {x, y, width, height}}}</nowiki></code>‎‎.
+
دالةٌ تُستدعى عند وصل العنصر (تصييره أول مرة) أو حدوث تغيّرات في التخطيط‎‎.
 
{| class="wikitable"
 
{| class="wikitable"
 
!النوع
 
!النوع
سطر 390: سطر 428:
 
|-
 
|-
 
|دالة
 
|دالة
 +
‎({ nativeEvent: [[ReactNative/layoutevent|LayoutEvent]] }) => void
 
|لا
 
|لا
 
|}
 
|}
 
===‎‎<code>onLongPress</code>‎‎===
 
===‎‎<code>onLongPress</code>‎‎===
تُستدعى هذه الدالة عند الضغط لفترة طويلة. يمكن استعمالها على الشكل التالي مثًلا: ‎‎<code>onLongPress={this.increaseSize}></code>‎‎.
+
تُستدعى هذه الدالة عند الضغط لفترة طويلة.
  
 
{| class="wikitable"
 
{| class="wikitable"
سطر 400: سطر 439:
 
|-
 
|-
 
|دالة
 
|دالة
 +
‎({ nativeEvent: [[ReactNative/pressevent|PressEvent]] }) => void
 
|لا
 
|لا
 
|}
 
|}
 
===‎‎<code>onMoveShouldSetResponder</code>‎‎===
 
===‎‎<code>onMoveShouldSetResponder</code>‎‎===
 
هل هذا العرض "يتطلّب" الاستجابة للّمس (touch responsiveness)؟ تُستدعى هذه الدالة في كل حركة لمسٍ على المكوّن ‎‎<code>View</code>‎‎ عندما لا يكون المستجيب (the responder).
 
هل هذا العرض "يتطلّب" الاستجابة للّمس (touch responsiveness)؟ تُستدعى هذه الدالة في كل حركة لمسٍ على المكوّن ‎‎<code>View</code>‎‎ عندما لا يكون المستجيب (the responder).
 
‎‎<code>View.props.onMoveShouldSetResponder: (event) => [true | false]</code>‎‎، بحيثُ يكون ‎‎<code>event</code>‎‎ حدثَ لمسٍ اصطناعي (synthetic touch event) كما هو موضح أعلاه.
 
 
{| class="wikitable"
 
{| class="wikitable"
 
!النوع
 
!النوع
سطر 411: سطر 449:
 
|-
 
|-
 
|دالة
 
|دالة
 +
‎({ nativeEvent: [[ReactNative/pressevent|PressEvent]] }) => void
 
|لا
 
|لا
 
|}
 
|}
  
 
===‎‎<code>onPress</code>‎‎===
 
===‎‎<code>onPress</code>‎‎===
تُستدعى هذه الدالة عند الضغط على العرض. يمكن استخدامها مثلًا بالشكل التالي: ‎‎<code>onPress={() => console.log('1st')}</code>‎‎.
+
تُستدعى هذه الدالة عند الضغط على العرض.
 
{| class="wikitable"
 
{| class="wikitable"
 
!النوع
 
!النوع
سطر 421: سطر 460:
 
|-
 
|-
 
|دالة
 
|دالة
 +
‎({ nativeEvent: [[ReactNative/pressevent|PressEvent]] }) => void
 
|لا
 
|لا
 
|}
 
|}
  
 
===‎‎<code>onResponderGrant</code>‎‎===
 
===‎‎<code>onResponderGrant</code>‎‎===
يستجيب العرض الآن لأحداث اللمس. هذا هو الوقت المناسب لإبراز وإظهار ما يحدث للمستخدم. مثال: ‎‎<code>View.props.onResponderGrant: (event) => {}</code>‎‎، بحيث يكون ‎‎<code>event</code>‎‎ حدثَ لمسٍ اصطناعيّ كما هو موضح أعلاه.
+
يستجيب العرض الآن لأحداث اللمس. هذا هو الوقت المناسب لإبراز وإظهار ما يحدث للمستخدم.
  
 
{| class="wikitable"
 
{| class="wikitable"
سطر 432: سطر 472:
 
|-
 
|-
 
|دالة
 
|دالة
 +
‎({ nativeEvent: [[ReactNative/pressevent|PressEvent]] }) => void
 
|لا
 
|لا
 
|}
 
|}
  
 
===‎‎<code>onResponderMove</code>‎‎===
 
===‎‎<code>onResponderMove</code>‎‎===
عندما يُحرِّك المستخدمُ إصبعه. مثال: ‎‎<code>View.props.onResponderMove: (event) => {}</code>‎‎، بحيث يكون ‎‎<code>event</code>‎‎ حدثَ لمسٍ اصطناعيّ كما هو موضح أعلاه.
+
عندما يُحرِّك المستخدمُ إصبعه.
  
 
{| class="wikitable"
 
{| class="wikitable"
سطر 443: سطر 484:
 
|-
 
|-
 
|دالة
 
|دالة
 +
‎({ nativeEvent: [[ReactNative/pressevent|PressEvent]] }) => void
 
|لا
 
|لا
 
|}
 
|}
  
 
===‎‎<code>onResponderRelease</code>‎‎===
 
===‎‎<code>onResponderRelease</code>‎‎===
دالةٌ تُستدعى عند نهاية اللمس. مثال: ‎‎<code>View.props.onResponderRelease: (event) => {}</code>‎‎، بحيث يكون ‎‎<code>event</code>‎‎ حدثَ لمسٍ اصطناعيّ كما هو موضح أعلاه.
+
دالةٌ تُستدعى عند نهاية اللمس.
  
 
{| class="wikitable"
 
{| class="wikitable"
سطر 454: سطر 496:
 
|-
 
|-
 
|دالة
 
|دالة
 +
‎({ nativeEvent: [[ReactNative/pressevent|PressEvent]] }) => void
 
|لا
 
|لا
 
|}
 
|}
  
 
===‎‎<code>onResponderTerminate</code>‎‎===
 
===‎‎<code>onResponderTerminate</code>‎‎===
دالةٌ تُستدعى عندما يُأخَذ المستجيب من العرض. قد تأخذه عروض أخرى بعد استدعاء ‎‎<code>onResponderTerminationRequest</code>‎‎، أو قد يأخذه نظام التشغيل دون طلب (يحدث هذا مع مركز التحكم أو مركز التنبيهات على iOS مثلًا)
+
دالةٌ تُستدعى عندما يُأخَذ المستجيب من العرض. قد تأخذه عروض أخرى بعد استدعاء ‎‎<code>onResponderTerminationRequest</code>‎‎، أو قد يأخذه نظام التشغيل دون طلب (يحدث هذا مع مركز التحكم أو مركز التنبيهات على iOS مثلًا).
مثال: ‎‎<code>View.props.onResponderTerminate: (event) => {}</code>‎‎، بحيث يكون ‎‎<code>event</code>‎‎ حدثَ لمسٍ اصطناعيّ كما هو موضح أعلاه.
 
 
{| class="wikitable"
 
{| class="wikitable"
 
!النوع
 
!النوع
سطر 465: سطر 507:
 
|-
 
|-
 
|دالة
 
|دالة
 +
‎({ nativeEvent: [[ReactNative/pressevent|PressEvent]] }) => void
 
|لا
 
|لا
 
|}
 
|}
سطر 470: سطر 513:
 
===‎‎<code>onResponderTerminationRequest</code>‎‎===
 
===‎‎<code>onResponderTerminationRequest</code>‎‎===
 
دالة تُستدعى عندما يريد عرضٌ آخر أن يصبح مستجيبًا ويطلب من هذا العرض تحرير المستجيب الخاص به. إعادة القيمة ‎‎<code>true</code>‎‎ يسمح بإطلاقه.
 
دالة تُستدعى عندما يريد عرضٌ آخر أن يصبح مستجيبًا ويطلب من هذا العرض تحرير المستجيب الخاص به. إعادة القيمة ‎‎<code>true</code>‎‎ يسمح بإطلاقه.
 
مثال: ‎‎<code>View.props.onResponderTerminationRequest: (event) => {}</code>‎‎، بحيث يكون ‎‎<code>event</code>‎‎ حدثَ لمسٍ اصطناعيّ كما هو موضح أعلاه.
 
  
 
{| class="wikitable"
 
{| class="wikitable"
سطر 478: سطر 519:
 
|-
 
|-
 
|دالة
 
|دالة
 +
‎({ nativeEvent: [[ReactNative/pressevent|PressEvent]] }) => void
 
|لا
 
|لا
 
|}
 
|}
سطر 483: سطر 525:
 
===‎‎<code>onStartShouldSetResponderCapture</code>‎‎===
 
===‎‎<code>onStartShouldSetResponderCapture</code>‎‎===
 
إذا أراد مُكوِّن ‎‎<code>View</code>‎‎ منع مُكوِّنِ ‎‎<code>View</code>‎‎ ابنٍ من أن يصبح مستجيبًا عند بداية اللمس، فيجب أن يحتويَ على هذا المعالج مُعيدًا القيمة ‎‎<code>true</code>‎‎.
 
إذا أراد مُكوِّن ‎‎<code>View</code>‎‎ منع مُكوِّنِ ‎‎<code>View</code>‎‎ ابنٍ من أن يصبح مستجيبًا عند بداية اللمس، فيجب أن يحتويَ على هذا المعالج مُعيدًا القيمة ‎‎<code>true</code>‎‎.
 
مثال: ‎‎<code>View.props.onStartShouldSetResponderCapture: (event) => [true | false]</code>‎‎، بحيث يكون ‎‎<code>event</code>‎‎ حدثَ لمسٍ اصطناعيّ كما هو موضح أعلاه.
 
  
 
{| class="wikitable"
 
{| class="wikitable"
سطر 491: سطر 531:
 
|-
 
|-
 
|دالة
 
|دالة
 +
‎({ nativeEvent: [[ReactNative/pressevent|PressEvent]] }) => void
 
|لا
 
|لا
 
|}
 
|}
  
 
===‎‎<code>onTextLayout</code>‎‎===
 
===‎‎<code>onTextLayout</code>‎‎===
+
تُستدعى عندما حدوث أي تغيير في تخطيط النص Text.
 
===‎‎<code>pressRetentionOffset</code>‎‎===
 
===‎‎<code>pressRetentionOffset</code>‎‎===
  
عند تعطيل عرض التمرير (scroll view)، تُحدِّد هذه الخاصيّة مدى المسافة التي يمكن أن تتحرك بها اللمسة بعيدًا عن الزر قبل إلغاء تنشيطه. بمجرد إلغاء تنشيط الزر، حاول تحريك لمستك للخلف وسترى أن الزر قد نُشِّطَ مرة أخرى! حركه للخلف وللأمام عدة مرات أثناء تعطيل عرض التمرير. تأكد من تمرير ثابتٍ لتقليل تخصيصات الذاكرة.
+
عند تعطيل [[ReactNative/scrollview|واجهة التمرير]] (scroll view)، تُحدِّد هذه الخاصيّة مدى المسافة التي يمكن أن تتحرك بها اللمسة بعيدًا عن الزر قبل إلغاء تنشيطه. بمجرد إلغاء تنشيط الزر، حاول تحريك لمستك للخلف وسترى أن الزر قد نُشِّطَ مرة أخرى! حركه للخلف وللأمام عدة مرات أثناء تعطيل عرض التمرير. تأكد من تمرير ثابتٍ لتقليل تخصيصات الذاكرة.
 
{| class="wikitable"
 
{| class="wikitable"
 
!النوع
 
!النوع
 
!مطلوب
 
!مطلوب
 
|-
 
|-
|‎‎<code>object: {top: number, left: number, bottom: number, right: number}</code>‎‎
+
|كائن [[ReactNative/rect|Rect]]، عدد number
 
|لا
 
|لا
 
|}
 
|}
 
===‎‎<code>selectable</code>‎‎===
 
===‎‎<code>selectable</code>‎‎===
يتيح للمستخدم تحديد النص لاستخدام وظيفة النسخ واللصق الأصيلتين.
+
يتيح للمستخدم تحديد النص لاستخدام وظيفة النسخ واللصق الأصيلتين. القيمة الافتراضية <code>false</code>.
 
{| class="wikitable"
 
{| class="wikitable"
 
!النوع
 
!النوع
سطر 524: سطر 565:
 
!المنصة
 
!المنصة
 
|-
 
|-
|لون
+
|[[ReactNative/colors|لون]]
 
|لا
 
|لا
 
|Android
 
|Android
 
|}
 
|}
 
===‎‎<code>style</code>‎‎===
 
===‎‎<code>style</code>‎‎===
 +
تنسيق النص.
 
{| class="wikitable"
 
{| class="wikitable"
 
!النوع
 
!النوع
 
!مطلوب
 
!مطلوب
 
|-
 
|-
|تنسيق
+
|خاصيات تنسيق النص [[ReactNative/text style props|Text Style]], خاصيات تنسيق الواجهة [[ReactNative/view style props|View Style Props]]
 
|لا
 
|لا
 
|}
 
|}
* خاصيّات تنسيق المكوّن [[ReactNative/view|‎‎<code>View</code>‎‎]]...
 
* ‎‎<code>textShadowOffset</code>‎‎: كائن، ‎‎<code>{width: number,height: number}</code>‎‎
 
* ‎‎<code>color</code>‎‎: [https://wiki.hsoub.com/ReactNative/colors لون].
 
* ‎‎<code>fontSize</code>‎‎:  عدد.
 
* ‎‎<code>fontStyle</code>‎‎: ثابت متعدد، ‎‎ .‎‎‎<code>enum('normal', 'italic')</code>‎‎‎
 
* ‎‎<code>fontWeight</code>‎‎: ثابت متعدد، ‎‎<code>enum('normal', 'bold', '100', '200', '300', '400', '500', '600', '700', '800', '900')</code>‎‎.
 
 
تُحدد وزن الخط. القيمتان ‎‎<code>'normal'</code>‎‎ و‎‎<code>'bold'</code>‎‎ مدعومتان من طرف معظم الخطوط. لا تحتوي جميع الخطوط على نسخةٍ لكل من القيم العدديّة، وفي هذه الحالة يتم اختيار الوزن الأقرب.
 
 
* ‎‎<code>lineHeight</code>‎‎: عدد.
 
* ‎‎<code>textAlign</code>‎‎: ثابت متعدد، ‎‎<code>enum('auto', 'left', 'right', 'center', 'justify')</code>‎‎. يحدد محاذاة النص. القيمة ‎‎<code>justify</code>‎‎ مدعومة فقط على iOS و Android Oreo (النسخة 8.0) أو أعلى (المستوى 26 أو أعلى من واجهة التطبيقات البرمجيّة). في نسخ Android الأقدم، سوف تعود القيمة إلى ‎‎<code>left</code>‎‎.
 
 
* ‎‎<code>textDecorationLine</code>‎‎: ثابت متعدد، ‎‎<code>enum('none', 'underline', 'line-through', 'underline line-through')</code>‎‎.
 
* ‎‎<code>textShadowColor</code>‎‎: [https://wiki.hsoub.com/ReactNative/colors لون].
 
* ‎‎<code>fontFamily</code>‎‎: سلسلة نصيّة.
 
* ‎‎<code>textShadowRadius</code>‎‎: عدد.
 
* ‎‎<code>includeFontPadding</code>‎‎: قيمة منطقيّة (Android). عيّن لها القيمة ‎‎<code>false</code>‎‎ لإزالة حشوة الخطوط الإضافية (extra font padding) المُخصَّصة لتوفير مساحةٍ لبعض الحروف الصاعدة (ascenders) والنازلة (descenders). في بعض الخطوط، يمكن لهذه الحشوة أن تجعل النص يبدو غير محاذٍ قليلاً عند توسيطه رأسياً. للحصول على أفضل النتائج، عيِّن كذلك القيمة ‎‎<code>center</code>‎‎ للخاصيّة ‎‎<code>textAlignVertical</code>‎‎. القيمة الافتراضيّة هي ‎‎<code>true</code>‎‎.
 
 
* ‎‎<code>textAlignVertical</code>‎‎: ثابت متعدد (Android)، ‎‎<code>enum('auto', 'top', 'bottom', 'center')</code>‎‎.
 
 
* ‎‎<code>fontVariant</code>‎‎: مصفوفة من الثوابت المتعدّدة (iOS)، ‎‎<code>enum('small-caps', 'oldstyle-nums', 'lining-nums', 'tabular-nums', 'proportional-nums')</code>‎‎.
 
* ‎‎<code>letterSpacing</code>‎‎: عدد. زيادة أو تقليل التباعد بين الأحرف. القيمة الافتراضية هي‎‎<code>0</code>‎‎، والتي تعني عدم وجود أيّ مسافات إضافية بين الأحرف.
 
على iOS: سيتم تصيير المساحة الإضافية بعد كل حرف رسومي (glyph).
 
 
على Android: مدعوم فقط منذ Android 5.0 - ستتجاهل الإصدارات الأقدم هذه السِّمة. لاحظ أنه ستُضافُ مساحة إضافية حول الحروف الرسومية (نصفُ المساحة على كل جانب)، والذي يختلف عن طريقة التصيير في iOS. من الممكن محاكاة تصيير iOS باستخدام سمات التخطيط (layout attributes)،  كالهوامش السلبية (negative margins) مثلًا، وذلك حسب ما يُناسبك.
 
* ‎‎<code>textDecorationColor</code>‎‎: [https://wiki.hsoub.com/ReactNative/colors لون] (iOS)
 
 
* ‎‎<code>textDecorationStyle</code>‎‎:ثابت متعدد (iOS)، ‎‎<code>enum('solid', 'double', 'dotted', 'dashed')</code>‎‎.
 
* ‎‎<code>textTransform</code>‎‎:ثابت متعدد، ‎‎<code>enum('none', 'uppercase', 'lowercase', 'capitalize')</code>‎‎.
 
* ‎‎<code>writingDirection</code>‎‎:ثابت متعدد (iOS)، ‎‎<code>enum('auto', 'ltr', 'rtl')</code>‎‎.
 
 
 
===‎‎<code>suppressHighlighting</code>‎‎===
 
===‎‎<code>suppressHighlighting</code>‎‎===
عندما تكون قيمتها القيمةَ ‎‎<code>true</code>‎‎، لا يُجرى أي تغيير مرئي عند الضغط على النص. افتراضيًا، يُبرِز شكلٌ بيضاوي رمادي النصَّ عند الضغط لأسفل.
+
عندما تكون قيمتها القيمةَ ‎‎<code>true</code>‎‎، لا يُجرى أي تغيير مرئي عند الضغط على النص. افتراضيًا، يُبرِز شكلٌ بيضاوي رمادي النصَّ عند الضغط لأسفل. القيمة الافتراضية <code>false</code>.
  
 
{| class="wikitable"
 
{| class="wikitable"
سطر 589: سطر 600:
 
|}
 
|}
 
===‎‎<code>textBreakStrategy</code>‎‎===
 
===‎‎<code>textBreakStrategy</code>‎‎===
عيّن استراتيجية فاصل النص (text break) على المستوى 23 من واجهة برمجة تطبيقات Android أو أحدث، القيم المحتملة هي: ‎‎<code>highQuality</code>‎‎، ‎‎<code>simple</code>‎‎ (القيمة الافتراضية)، ‎‎<code>balanced</code>‎‎.
+
تضبط استراتيجية فاصل النص (text break) على المستوى 23 من واجهة برمجة تطبيقات Android أو أحدث، القيم المحتملة هي: ‎‎<code>highQuality</code>‎‎، ‎‎<code>simple</code>‎‎ (القيمة الافتراضية)، ‎‎<code>balanced</code>‎‎.
  
 
{| class="wikitable"
 
{| class="wikitable"
سطر 596: سطر 607:
 
!المنصة
 
!المنصة
 
|-
 
|-
|‎‎<code>enum('simple', 'highQuality', 'balanced')</code>‎‎
+
|‎‎('simple', 'highQuality', 'balanced')‎‎
 
|لا
 
|لا
 
|Android
 
|Android
 
|}
 
|}
  
==مشاكل معروفة==
+
== تعريفات النوع ==
 +
 
 +
=== <code>TextLayout</code> ===
 +
الكائن <code>TextLayout</code> هو جزء من رد النداء <code>TextLayoutEvent</code> (مشروح تاليًا) ويحوي بيانات القياس لسطر النص <code>Text</code>.
  
[https://github.com/facebook/react-native/issues/22811 react-native#22811]: لا تدعم عناصر النص المتداخلة سمَة ‎‎<code>numberOfLines</code>‎‎.
+
إليك مثال:<syntaxhighlight lang="js">
 +
{
 +
    capHeight: 10.496,
 +
    ascender: 14.624,
 +
    descender: 4,
 +
    width: 28.224,
 +
    height: 18.624,
 +
    xHeight: 6.048,
 +
    x: 0,
 +
    y: 0
 +
}
 +
</syntaxhighlight>الخاصيات:
 +
{| class="wikitable"
 +
!الاسم
 +
!النوع
 +
!مطلوب
 +
!الوصف
 +
|-
 +
|ascender
 +
|عدد
 +
|لا
 +
|ارتفاع السطر الصاعد / المرتفع (line ascender height) بعد تغيير تخطيط النص.
 +
|-
 +
|capHeight
 +
|عدد
 +
|لا
 +
|ارتفاع الحرف الكبير عن خط الأساس (baseline).
 +
|-
 +
|descender
 +
|عدد
 +
|لا
 +
|ارتفاع النازل / المنخفض  (line ascender height) بعد تغيير تخطيط النص.
 +
|-
 +
|height
 +
|عدد
 +
|لا
 +
|ارتفاع السطر بعد تغيير تخطيط النص.
 +
|-
 +
|width
 +
|عدد
 +
|لا
 +
|عرض السطر بعد تغيير تخطيط النص.
 +
|-
 +
|x
 +
|عدد
 +
|لا
 +
|إحداثيات X للسطر ضمن مكون النص Text.
 +
|-
 +
|xHeight
 +
|عدد
 +
|لا
 +
|المسافية بين الخط الأساس ومتوسط السطر (حجم الجزء الأساسي corpus size).
 +
|-
 +
|y
 +
|عدد
 +
|لا
 +
|إحداثيات Y للسطر ضمن مكون النص Text.
 +
|}
 +
 
 +
=== <code>TextLayoutEvent</code> ===
 +
يُعاد الكائن <code>TextLayoutEvent</code> من دالة رد نداء نتيجة حدوثٍ تغيير في تخطيط المكون، وتحوي مفتاحًا يدعى <code>lines</code> قيمته مصفوفة من كائنات <code>TextLayout</code> مقابلة لكل سطر جرى تصييره.
 +
 
 +
إليك مثال:<syntaxhighlight lang="js">
 +
{
 +
  lines: [
 +
    TextLayout,
 +
    TextLayout
 +
    // ...
 +
  ];
 +
  target: 1127;
 +
}
 +
</syntaxhighlight>الخاصيات:
 +
{| class="wikitable"
 +
!الاسم
 +
!النوع
 +
!مطلوب
 +
!الوصف
 +
|-
 +
|lines
 +
|مصفوفة من كائنات <code>TextLayout</code>
 +
|لا
 +
|يوفر معلومات عن تخطيط النص <code>TextLayout</code> لكل سطر جرى تصييره.
 +
|-
 +
|target
 +
|عدد
 +
|لا
 +
|مُعرِّف العقدة للعنصر.
 +
|}
  
 
== مصادر ==
 
== مصادر ==
 
* [https://facebook.github.io/react-native/docs/text#containers صفحة Text في توثيق React Native الرسمي.]
 
* [https://facebook.github.io/react-native/docs/text#containers صفحة Text في توثيق React Native الرسمي.]
 
[[تصنيف:ReactNative]]
 
[[تصنيف:ReactNative]]

مراجعة 15:59، 30 سبتمبر 2021

مكوّن React لعرض النصوص.

يدعم المكوّن ‎‎Text‎‎ النصوص المتداخلة والتنسيق ومعالجة اللمسات.

في المثال التالي، يرث العنوان المتداخل والنص الأساسي خاصيّة fontFamily من ‎‎styles.baseText‎‎، لكن العنوان يوفّر أنماطا إضافية خاصة به. سيتم تكديس العنوان والنص الأساسي فوق بعضهما البعض عند الوصول إلى محارف الأسطر الجديدة (literal newlines):

import React, { useState } from "react";
import { Text, StyleSheet } from "react-native";

const TextInANest = () => {
  const [titleText, setTitleText] = useState("Bird's Nest");
  const bodyText = "This is not really a bird nest.";

  const onPressTitle = () => {
    setTitleText("Bird's Nest [pressed]");
  };

  return (
    <Text style={styles.baseText}>
      <Text style={styles.titleText} onPress={onPressTitle}>
        {titleText}
        {"\n"}
        {"\n"}
      </Text>
      <Text numberOfLines={5}>{bodyText}</Text>
    </Text>
  );
};

const styles = StyleSheet.create({
  baseText: {
    fontFamily: "Cochin"
  },
  titleText: {
    fontSize: 20,
    fontWeight: "bold"
  }
});

export default TextInANest;
import React, { Component } from "react";
import { Text, StyleSheet } from "react-native";

class TextInANest extends Component {
  constructor(props) {
    super(props);
    this.state = {
      titleText: "Bird's Nest",
      bodyText: "This is not really a bird nest."
    };
  }

  onPressTitle = () => {
    this.setState({ titleText: "Bird's Nest [pressed]" });
  };

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

export default TextInANest;

النصوص المتداخلة

يتيح كل من نظامي iOS وAndroid عرض نص منسق عن طريق التعليق (annotating) على نطاقاتِ سلسلةٍ نصيّة بتنسيقات محددة لجعله نصًّا غامقًا أو ملونًا مثلًا (‎‎NSAttributedString‎‎ على iOS و‎‎SpannableString‎‎ على Android). عمليًّا، هذا شاق للغاية. في React Native، يُمكن استخدام صيغة الويب لهذا الغرض، حيث يمكنك تدخيل النص لتحقيق التأثير نفسه.

إليك المثال التالي (تجربة حية):

import React from 'react';
import { Text, StyleSheet } from 'react-native';

const BoldAndBeautiful = () => {
  return (
    <Text style={styles.baseText}>
      I am bold
      <Text style={styles.innerText}> and red</Text>
    </Text>
  );
};

const styles = StyleSheet.create({
  baseText: {
    fontWeight: 'bold'
  },
  innerText: {
    color: 'red'
  }
});

export default BoldAndBeautiful;

وراء الكواليس، يُحوِّل 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) المستخدمينَ على فهم ما سيحدث عندما يقومون بإجراءٍ على عنصر مهيئأة ليكون سهل الوصول عندما لا تكون النتيجة واضحةً من العنوان المساعد لسهولة الوصول accessibilityLabel.

النوع مطلوب
سلسلة نصيّة لا

‎‎accessibilityRole‎‎

تقوم الخاصيّة accessibilityRole بتوصيل الغرض من المكون (أي دَوره) إلى المستخدم عبر تقنيةٍ مساعدة (assistive technology) مثل قارئات الشاشة.

تترجم هذه الأدوار إلى تقنية Accessibility Traits المقابلة على نظام iOS. الزر Image يملك الوظيفة نفسها كما لو أن صفته (دوره) حُدِّد إلى 'image' أو 'button'. انظر دليل سهولة الوصول لمزيد من التفاصيل.

أما على نظام Android، فلهذه الأدوار قيمة مقابلة على تقنية TalkBack بالمثل كما في نظام iOS الذي تحدثنا عنه آنفًا.

النوع مطلوب
النوع accessibilityRole لا

‎‎accessibilityState‎‎

تحدد قيمة هذه الخاصية التقنيةٍ المساعدة مثل قارئ الشاشة بحالة العنصر المحدد (المركز) عليه آنذاك، ويمكنك أن لا تحدد أي حالة أو تحدد حالة واحدة أو عدة حالات بتمريرها عبر كائن مثل {selected: true, disabled: true}.

النوع مطلوب
AccessibilityState لا

‎‎adjustsFontSizeToFit‎‎

تُحدِّد ما إذا كان يجب تصغير الخطوط تلقائيًا لتناسب قيود النمط المُعطاة. القيمة الافتراضية false.

النوع مطلوب المنصة
قيمة منطقيّة لا iOS

‎‎allowFontScaling‎‎

لتحديد ما إذا كان يجب تغيير حجم الخطوط لاحترام إعدادات حجم النص الخاصة بإمكانية الوصول. القيمة الافتراضية هي ‎‎true‎‎.

النوع مطلوب
قيمة منطقيّة لا

android_hyphenationFrequency

تحدد تكرار عملية فصل الكلمات الأجنبية بفاصلة (شرطة - ) التلقائية لتُستخدَم متى ما سُمِح بفصل الكلمات الواحدة بفاصل على واجهة Android API المستوى 23 وما بعد. القيمة الافتراضية 'none'.

النوع مطلوب المنصة
('none', 'full', 'balanced', 'high') لا Android API Level 23+‎

‎‎dataDetectorType‎‎

يُحدِّد أنواع البيانات المحوَّلَة إلى عناوين URL قابلةٍ للنقر في عنصر النص. افتراضيًا، لا يتم اكتشاف أي أنواع بيانات.

يمكنك تحديد نوع واحد فقط.

القيم المحتملة للخاصيّة ‎‎dataDetectorType‎‎ موضحة بالجدول. القيمة الافتراضية 'none'.

النوع مطلوب المنصة
‎‎('phoneNumber', 'link', 'email', 'none', 'all')‎‎ لا Android

‎‎disabled‎‎

يُحدّد الحالة المعطلة لعرض النص لأغراض الاختبار. القيمة الافتراضية false.

النوع مطلوب المنصة
قيمة منطقيّة لا Android

‎‎ellipsizeMode‎‎

عندما تُعيَّن قيمة للخاصيّة ‎‎numberOfLines‎‎، فإنّ هذه الخاصيَّة تُحدِّد كيفية اقتطاع النص. يجب تعيين قيمة للخاصيّة numberOfLines بالتزامن مع هذه الخاصيّة.

يمكن أن تحمل أحد القيم التالية:

  • ‎‎head‎‎: يُعرَض السطر بحيث توضع النهاية في الحاوية ويتم الإشارة إلى النص المفقود في بداية السطر بواسطة علامة إضمار. أي ‎‎...wxyz‎‎ مثلا.
  • ‎‎middle‎‎: يُعرض السطر بحيث يتم احتواء البداية والنهاية في الحاوية ويتم الإشارة إلى النص المفقود في المنتصف بواسطة علامة إضمار. أي ‎‎ab...yz‎‎ مثلا.
  • ‎‎tail‎‎: (القيمة الافتراضية) يتم عرض السطر بحيث يتم احتواء البداية في الحاوية ويتم الإشارة إلى النص المفقود في نهاية السطر بواسطة علامة إضمار. أي ‎‎abcd...‎‎ مثلا.
  • ‎‎clip‎‎: لا يتم رسم الأسطر بعد حافة حاوية النص.

القيمة الافتراضيّة هي ‎‎tail‎‎.

إن ضبط قيمة الخاصة numberOfLines في نظام Android إلى قيمة أعلى من 1، فلن تعمل سوى القيمة 'tail' مع هذه الخاصية.

النوع مطلوب
‎‎('head', 'middle', 'tail', 'clip')‎‎ لا

‎‎maxFontSizeMultiplier‎‎

يُحدد أكبر مقياس ممكن يمكن أن يصل إليه الخط عند تمكين الخاصيّة ‎‎allowFontScaling‎‎. القيم الممكنة:

  • ‎‎null/undefined‎‎: (القيمة الافتراضية): ترث من العقدة الأب أو القيمة الافتراضيّة العامّة (‎‎0‎‎).
  • ‎‎0‎: لا حدَّ أقصى، وتَجاهَل قيمة الأب أو القيمة الافتراضية العامّة.
  • ‎‎>= 1‎: تُعيِّن قيمةَ الخاصيّةِ ‎‎maxFontSizeMultiplier‎‎ الخاصة بهذه العقدة إلى هذه القيمة.
النوع مطلوب
عدد لا

‎‎minimumFontScale‎‎

يُحدِّد أصغر مقياس ممكن يمكن أن يصل إليه الخط عند تمكين الخاصية ‎‎adjustsFontSizeToFit‎‎. (القيم من ‎‎0.01‎‎ إلى ‎‎1.0‎‎).

النوع مطلوب المنصة
عدد لا iOS

‎‎nativeID‎‎

تُستخدَم لتحديد موقع هذا العرض من الشيفرة الأصيلة.

النوع مطلوب
سلسلة نصيّة لا

‎‎numberOfLines‎‎

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

تُستخدم هذه الخاصيّة بشكل شائع مع الخاصية ‎‎ellipsizeMode‎‎. القيمة الافتراضية 0.

النوع مطلوب
عدد لا

‎‎onLayout‎‎

دالةٌ تُستدعى عند وصل العنصر (تصييره أول مرة) أو حدوث تغيّرات في التخطيط‎‎.

النوع مطلوب
دالة

‎({ nativeEvent: LayoutEvent }) => void

لا

‎‎onLongPress‎‎

تُستدعى هذه الدالة عند الضغط لفترة طويلة.

النوع مطلوب
دالة

‎({ nativeEvent: PressEvent }) => void

لا

‎‎onMoveShouldSetResponder‎‎

هل هذا العرض "يتطلّب" الاستجابة للّمس (touch responsiveness)؟ تُستدعى هذه الدالة في كل حركة لمسٍ على المكوّن ‎‎View‎‎ عندما لا يكون المستجيب (the responder).

النوع مطلوب
دالة

‎({ nativeEvent: PressEvent }) => void

لا

‎‎onPress‎‎

تُستدعى هذه الدالة عند الضغط على العرض.

النوع مطلوب
دالة

‎({ nativeEvent: PressEvent }) => void

لا

‎‎onResponderGrant‎‎

يستجيب العرض الآن لأحداث اللمس. هذا هو الوقت المناسب لإبراز وإظهار ما يحدث للمستخدم.

النوع مطلوب
دالة

‎({ nativeEvent: PressEvent }) => void

لا

‎‎onResponderMove‎‎

عندما يُحرِّك المستخدمُ إصبعه.

النوع مطلوب
دالة

‎({ nativeEvent: PressEvent }) => void

لا

‎‎onResponderRelease‎‎

دالةٌ تُستدعى عند نهاية اللمس.

النوع مطلوب
دالة

‎({ nativeEvent: PressEvent }) => void

لا

‎‎onResponderTerminate‎‎

دالةٌ تُستدعى عندما يُأخَذ المستجيب من العرض. قد تأخذه عروض أخرى بعد استدعاء ‎‎onResponderTerminationRequest‎‎، أو قد يأخذه نظام التشغيل دون طلب (يحدث هذا مع مركز التحكم أو مركز التنبيهات على iOS مثلًا).

النوع مطلوب
دالة

‎({ nativeEvent: PressEvent }) => void

لا

‎‎onResponderTerminationRequest‎‎

دالة تُستدعى عندما يريد عرضٌ آخر أن يصبح مستجيبًا ويطلب من هذا العرض تحرير المستجيب الخاص به. إعادة القيمة ‎‎true‎‎ يسمح بإطلاقه.

النوع مطلوب
دالة

‎({ nativeEvent: PressEvent }) => void

لا

‎‎onStartShouldSetResponderCapture‎‎

إذا أراد مُكوِّن ‎‎View‎‎ منع مُكوِّنِ ‎‎View‎‎ ابنٍ من أن يصبح مستجيبًا عند بداية اللمس، فيجب أن يحتويَ على هذا المعالج مُعيدًا القيمة ‎‎true‎‎.

النوع مطلوب
دالة

‎({ nativeEvent: PressEvent }) => void

لا

‎‎onTextLayout‎‎

تُستدعى عندما حدوث أي تغيير في تخطيط النص Text.

‎‎pressRetentionOffset‎‎

عند تعطيل واجهة التمرير (scroll view)، تُحدِّد هذه الخاصيّة مدى المسافة التي يمكن أن تتحرك بها اللمسة بعيدًا عن الزر قبل إلغاء تنشيطه. بمجرد إلغاء تنشيط الزر، حاول تحريك لمستك للخلف وسترى أن الزر قد نُشِّطَ مرة أخرى! حركه للخلف وللأمام عدة مرات أثناء تعطيل عرض التمرير. تأكد من تمرير ثابتٍ لتقليل تخصيصات الذاكرة.

النوع مطلوب
كائن Rect، عدد number لا

‎‎selectable‎‎

يتيح للمستخدم تحديد النص لاستخدام وظيفة النسخ واللصق الأصيلتين. القيمة الافتراضية false.

النوع مطلوب
قيمة منطقيّة لا

‎‎selectionColor‎‎

لون إبراز (highlight color) النص.

النوع مطلوب المنصة
لون لا Android

‎‎style‎‎

تنسيق النص.

النوع مطلوب
خاصيات تنسيق النص Text Style, خاصيات تنسيق الواجهة View Style Props لا

‎‎suppressHighlighting‎‎

عندما تكون قيمتها القيمةَ ‎‎true‎‎، لا يُجرى أي تغيير مرئي عند الضغط على النص. افتراضيًا، يُبرِز شكلٌ بيضاوي رمادي النصَّ عند الضغط لأسفل. القيمة الافتراضية false.

النوع مطلوب المنصة
قيمة منطقيّة لا iOS

‎‎testID‎‎

يُستخدَم لتحديد موقع هذا العرض في الاختبارات الشاملة (end-to-end tests).

النوع مطلوب
سلسلة نصيّة لا

‎‎textBreakStrategy‎‎

تضبط استراتيجية فاصل النص (text break) على المستوى 23 من واجهة برمجة تطبيقات Android أو أحدث، القيم المحتملة هي: ‎‎highQuality‎‎، ‎‎simple‎‎ (القيمة الافتراضية)، ‎‎balanced‎‎.

النوع مطلوب المنصة
‎‎('simple', 'highQuality', 'balanced')‎‎ لا Android

تعريفات النوع

TextLayout

الكائن TextLayout هو جزء من رد النداء TextLayoutEvent (مشروح تاليًا) ويحوي بيانات القياس لسطر النص Text.

إليك مثال:

{
    capHeight: 10.496,
    ascender: 14.624,
    descender: 4,
    width: 28.224,
    height: 18.624,
    xHeight: 6.048,
    x: 0,
    y: 0
}

الخاصيات:

الاسم النوع مطلوب الوصف
ascender عدد لا ارتفاع السطر الصاعد / المرتفع (line ascender height) بعد تغيير تخطيط النص.
capHeight عدد لا ارتفاع الحرف الكبير عن خط الأساس (baseline).
descender عدد لا ارتفاع النازل / المنخفض (line ascender height) بعد تغيير تخطيط النص.
height عدد لا ارتفاع السطر بعد تغيير تخطيط النص.
width عدد لا عرض السطر بعد تغيير تخطيط النص.
x عدد لا إحداثيات X للسطر ضمن مكون النص Text.
xHeight عدد لا المسافية بين الخط الأساس ومتوسط السطر (حجم الجزء الأساسي corpus size).
y عدد لا إحداثيات Y للسطر ضمن مكون النص Text.

TextLayoutEvent

يُعاد الكائن TextLayoutEvent من دالة رد نداء نتيجة حدوثٍ تغيير في تخطيط المكون، وتحوي مفتاحًا يدعى lines قيمته مصفوفة من كائنات TextLayout مقابلة لكل سطر جرى تصييره.

إليك مثال:

{
  lines: [
    TextLayout,
    TextLayout
    // ...
  ];
  target: 1127;
}

الخاصيات:

الاسم النوع مطلوب الوصف
lines مصفوفة من كائنات TextLayout لا يوفر معلومات عن تخطيط النص TextLayout لكل سطر جرى تصييره.
target عدد لا مُعرِّف العقدة للعنصر.

مصادر