الفرق بين المراجعتين لصفحة: «ReactNative/view»

من موسوعة حسوب
ط تصحيح الروابط
ط مراجعة
سطر 1: سطر 1:
<noinclude>{{DISPLAYTITLE: View في React Native}}</noinclude>
<noinclude>{{DISPLAYTITLE:المكون View في React Native}}</noinclude>
المُكوِّن ‎‎<code>View</code>‎‎ هو المكوِّن الأساسيّ لبناء واجهة مستخدم، وهو‎‎ حاوية تدعم التخطيط باستخدام [[ReactNative/flexbox|flexbox]]،وتدعم [[ReactNative/style|التنسيق]]، وبعض مبادئ [[ReactNative/handling touches|معالجة اللمسات]]، وأدوات [[ReactNative/accessibility|التحكم في إمكانية الوصول]]. يُربَطُ المُكوِّن ‎‎<code>View</code>‎‎ مباشرةً مع العرض الأصيل الذي يُعادله حسب نظام التشغيل الذي يعمل عليه React Native، سواء أكان ذلك عرض ‎‎<code>UIView</code>‎‎، أو ‎‎<code><nowiki><div></nowiki></code>‎‎، أو ‎‎<code>android.view</code>‎‎ وما إلى ذلك.
المُكوِّن ‎‎<code>View</code>‎‎ هو المكوِّن الأساسيّ لبناء واجهة مستخدم، وهو‎‎ حاوية تدعم التخطيط باستخدام [[ReactNative/flexbox|flexbox]]،وتدعم [[ReactNative/style|التنسيق]]، وبعض مبادئ [[ReactNative/handling touches|معالجة اللمسات]]، وأدوات [[ReactNative/accessibility|التحكم في سهولة الوصول]]. يُربَطُ المُكوِّن ‎‎<code>View</code>‎‎ مباشرةً مع الواجهة الأصيلة التي تُعادله حسب نظام التشغيل الذي يعمل عليه React Native، سواء أكان ذلك واجهة <code>UIView</code>‎‎، أو عنصر ‎‎<code><nowiki><div></nowiki></code>‎‎، أو واجهة ‎‎<code>android.view</code>‎‎ وما إلى ذلك.


صُمِّم المُكوِّن ‎‎<code>View</code>‎‎ ليتداخل داخل عروضٍ أخرى ويمكن أن لا يحتوي على أي عناصر أبناء كما يُمكن أن يحتوي على العديد من العناصر الأبناء من أي نوع.
صُمِّم المُكوِّن ‎‎<code>View</code>‎‎ ليتداخل داخل واجهات <code>View</code> أخرى ويمكن أن لا يحتوي على أي عناصر أبناء كما يُمكن أن يحتوي على العديد من العناصر الأبناء من أي نوع.<blockquote>'''ملاحظة''': سنطلق على هذا المكون اسم "واجهة" واسم "عرض" بالتبادل لأنه واجهة تَعرض شيئًا بداخلها فجاءت معنى واجهة ومعنى عرض، لذا قد تجد كلا الاسمين في توثيق React Native العربي مستعملان يشيران إلى View وإن كانت وتيرة "عرض" أقل حتى لا تتعارض مع عرض التي تشير إلى width لذلك حرصنا في تلك السياقات لتجنب التعارض وضع المصطلح الأجنبي بجانبها.</blockquote>


== مثال ==
يُنشئ هذا المثال مُكوِّن ‎‎<code>View</code>‎‎ يُغلِّف صندوقين ملونين ومكونَ نصٍّ في صف مع حشو (padding):
يُنشئ هذا المثال مُكوِّن ‎‎<code>View</code>‎‎ يُغلِّف صندوقين ملونين ومكونَ نصٍّ في صف مع حشو (padding):
* [https://snack.expo.dev/@hsoubwiki/view-function-component-example مثال مكون دالة (Function Component)]
<syntaxhighlight lang="javascript">
<syntaxhighlight lang="javascript">
class ViewColoredBoxesWithText extends Component {
import React from "react";
import { View, Text } from "react-native";
 
const ViewBoxesWithColorAndText = () => {
  return (
    <View
      style={{
        flexDirection: "row",
        height: 100,
        padding: 20
      }}
    >
      <View style={{ backgroundColor: "blue", flex: 0.3 }} />
      <View style={{ backgroundColor: "red", flex: 0.5 }} />
      <Text>Hello World!</Text>
    </View>
  );
};
 
export default ViewBoxesWithColorAndText;
</syntaxhighlight>
 
* [https://snack.expo.dev/@hsoubwiki/view-class-component-example مثال مكون صنف (Class Component)]
<syntaxhighlight lang="javascript">
import React, { Component } from "react";
import { View, Text } from "react-native";
 
class App extends Component {
   render() {
   render() {
     return (
     return (
       <View
       <View
         style={{
         style={{
           flexDirection: 'row',
           flexDirection: "row",
           height: 100,
           height: 100,
           padding: 20,
           padding: 20
         }}>
         }}
         <View style={{backgroundColor: 'blue', flex: 0.3}} />
      >
         <View style={{backgroundColor: 'red', flex: 0.5}} />
         <View style={{ backgroundColor: "blue", flex: 0.3 }} />
         <View style={{ backgroundColor: "red", flex: 0.5 }} />
         <Text>Hello World!</Text>
         <Text>Hello World!</Text>
       </View>
       </View>
سطر 22: سطر 53:
   }
   }
}
}
export default App;
</syntaxhighlight>
</syntaxhighlight>


صُمِّمت مكوّنات ‎ <code>View</code>‎‎‎لتُستخدَم مع كائن [[ReactNative/stylesheet|StyleSheet]] من أجل الوضوح وتحسين الأداء، رغم أنّ التنسيقات السطريّة (inline styles) مدعومة أيضًا.
صُمِّمت مكوّنات ‎ <code>View</code>‎‎‎لتُستخدَم مع كائن [[ReactNative/stylesheet|StyleSheet]] من أجل الوضوح وتحسين الأداء، رغم أنّ التنسيقات السطريّة (inline styles) مدعومة أيضًا.
==أحداث اللمس الاصطناعية ‎‎ (Synthetic Touch Events)==
==أحداث اللمس الاصطناعية ‎‎ (Synthetic Touch Events)==
بالنسبة لخاصيات مُستجيب (responder) المُكوِّن ‎‎<code>View</code>‎‎  (الخاصيّة ‎‎<code>onResponderMove</code>‎‎ مثلا)، يكون حدث اللمس الاصطناعي الذي يُمرَّر إليها على الشكل التالي:
بالنسبة لخاصيات مُستجيب (responder) المُكوِّن ‎‎<code>View</code>‎‎  (الخاصيّة ‎‎<code>onResponderMove</code>‎‎ مثلا)، يكون حدث اللمس الاصطناعي الذي يُمرَّر إليها على شكل الكائن [[ReactNative/pressevent|<code>PressEvent</code>]].
 
* <code>nativeEvent</code>
** ‎‎<code>changedTouches</code>‎‎: مصفوفة جميع أحداث اللمس التي تغيّرت منذ آخر حدث.
** ‎‎<code>identifier</code>‎‎: مُعرِّف (ID) اللمسة.
** ‎‎<code>locationX</code>‎‎: موقع X للّمسة، نسبةً للعنصر.
** ‎‎<code>locationY</code>‎‎: موقع Y للّمسة، نسبةً للعنصر.
** ‎‎<code>pageX</code>‎‎: موضع X للّمسة، نسبةً للعنصر الجذر (root element).
** ‎‎<code>pageY</code>‎‎: موقع Y للّمسة، نسبةً للعنصر الجذر.
** ‎‎<code>target</code>‎‎: مُعرِّف العقدة (node id) للعنصر الذي يستقبل حدث اللمسة.
** ‎‎<code>timestamp</code>‎‎: مُعرِّف وقتٍ (time identifier) للمسة، ما يُفيد في حساب السرعة.
** ‎‎<code>touches</code>‎‎: مصفوفة جميع اللمسات الحالية على الشاشة.
 
للمزيد، انظر صفحة [[ReactNative/gesture responder system|نظام مستجيب الإيماءات.]]


==الخاصيات==
==الخاصيات==
===‎‎<code>onStartShouldSetResponder</code>‎‎===
===‎‎<code>onStartShouldSetResponder</code>‎‎===
هل يريد هذا العرض أن يصبح مستجيبًا عند بدء اللمس؟
هل تريد هذه الواجهة أن تصبح مستجيبةً عند بدء اللمس؟


مثال: ‎‎<code>View.props.onStartShouldSetResponder: (event) => [true | false]</code>‎‎، بحيث يكون ‎‎<code>event</code>‎‎ حدثَ لمسٍ اصطناعيّ كما هو موضح أعلاه.
مثال: ‎‎<code>View.props.onStartShouldSetResponder: (event) => [true | false]</code>‎‎، بحيث يكون ‎‎<code>event</code>‎‎ حدثَ لمسٍ اصطناعيّ كما هو موضح أعلاه (أي على شكل الكائن [[ReactNative/pressevent|<code>PressEvent</code>]]).


{| class="wikitable"
{| class="wikitable"
سطر 56: سطر 76:


===‎‎<code>accessible</code>‎‎===
===‎‎<code>accessible</code>‎‎===
عندما تكون قيمتُها القيمةَ ‎‎<code>true</code>‎‎، فهذا يُشير إلى أنّ العرضَ هو عنصرُ إمكانيةِ الوصول (accessibility element). افتراضيًّا، جميع العناصر القابلة للمس هي عناصر إمكانية وصول.
عندما تكون قيمتُها القيمةَ ‎‎<code>true</code>‎‎، فهذا يُشير إلى أنّ الواجهة هي عنصرُ [[ReactNative/accessibility|سهل الوصول]] (accessibility element) لكافة المستخدمين. افتراضيًّا، جميع العناصر القابلة للمس هي عناصر سهلة وصول.


{| class="wikitable"
{| class="wikitable"
سطر 66: سطر 86:
|}
|}
===‎‎<code>accessibilityLabel</code>‎‎===
===‎‎<code>accessibilityLabel</code>‎‎===
تستبدِل النص الذي يقرأه قارئ الشاشة عندما يتفاعل المستخدم مع العنصر. افتراضيًا، يُنشأ الملصق (label) عن طريق العبور عبر جميع المكوّنات الأبناء وتجميع كافة العقد النصية مفصولةً بمسافة.
تستبدِل النص الذي يقرأه قارئ الشاشة عندما يتفاعل المستخدم مع العنصر. افتراضيًا، يُنشأ العنوان أو التسمية (label) عن طريق العبور عبر جميع المكوّنات الأبناء وتجميع كافة العقد النصية <code>Text</code> مفصولةً بمسافة.


{| class="wikitable"
{| class="wikitable"
سطر 77: سطر 97:


===‎‎<code>accessibilityHint</code>‎‎===
===‎‎<code>accessibilityHint</code>‎‎===
يُساعد تلميح إمكانية الوصول (accessibility hint) المستخدمينَ على فهم ما سيحدث عندما يقومون بإجراءٍ على عنصر إمكانية الوصول عندما لا تكون النتيجة واضحةً من مُلصَق إمكانية الوصول.
يُساعد تلميح سهولة وصول (accessibility hint) المستخدمينَ على فهم ما سيحدث عندما يقومون بإجراءٍ على عنصر سهولة الوصول عندما لا تكون النتيجة واضحةً من عنوان سهولة الوصول <code>accessibilityLabel</code>‎‎.
{| class="wikitable"
{| class="wikitable"
!النوع
!النوع
سطر 129: سطر 149:
تصف الحالة الحالية لمكوّنٍ ما لمستخدمِ تقنيةٍ مساعدة.
تصف الحالة الحالية لمكوّنٍ ما لمستخدمِ تقنيةٍ مساعدة.


انظر [https://wiki.hsoub.com/ReactNative/accessibility دليل إمكانية الوصول] لمزيد من المعلومات.
انظر [[ReactNative/accessibility|دليل سهولة الوصول]] لمزيد من المعلومات.


{| class="wikitable"
{| class="wikitable"
سطر 135: سطر 155:
!مطلوب
!مطلوب
|-
|-
|‎‎<code>object: {disabled: bool, selected: bool, checked: bool or 'mixed', busy: bool, expanded: bool}</code>‎‎
|‎‎كائن: {disabled: bool, selected: bool, checked: bool or 'mixed', busy: bool, expanded: bool}‎‎
|لا
|لا
|}
|}


===‎‎<code>accessibilityValue</code>‎‎===
===‎‎<code>accessibilityValue</code>‎‎===
تُمثل القيمة الحالية للمكون. يمكن أن تكون قيمتها وصفًا نصيًا لقيمة المكون، ويمكن أن تحتوي على معلومات النطاق (الحد الأدنى [minimum]، القيمة الحالية [current]، والحد الأقصى [maximum]) للمكونات المعتمدة على النطاق (range-based components)، كأشرطة التمرير (sliders) وأشرطة التقدم (progress bars).
تُمثل القيمة الحالية للمكون. يمكن أن تكون قيمتها وصفًا نصيًا لقيمة المكون، ويمكن أن تحتوي على معلومات المجال (الحد الأدنى [minimum]، القيمة الحالية [current]، والحد الأقصى [maximum]) للمكونات المعتمدة على النطاق (range-based components)، كأشرطة التمرير (sliders) وأشرطة التقدم (progress bars).


انظر [https://wiki.hsoub.com/ReactNative/accessibility دليل إمكانية الوصول] لمزيد من المعلومات.
انظر [[ReactNative/accessibility|دليل سهولة الوصول]] لمزيد من المعلومات.


{| class="wikitable"
{| class="wikitable"
سطر 148: سطر 168:
!مطلوب
!مطلوب
|-
|-
|<code>object: {min: number, max: number, now: number, text: string}</code>
|كائن: {min: number, max: number, now: number, text: string}
|لا
|لا
|}
|}


===‎‎<code>accessibilityActions</code>‎‎===
===‎‎<code>accessibilityActions</code>‎‎===
تسمح إجراءات إمكانية الوصول (Accessibility actions) لتقنيّة مساعدة باستدعاء إجراءات مكونٍ برمجيًا. يجب أن تحتوي الخاصية <code>accessibilityActions</code> على قائمة كائنات إجراءات (action objects). يجب أن يحتوي كل كائن إجراء على اسم الحقل وعلى ملصق (label).
تسمح إجراءات سهولة الوصول (Accessibility actions) لتقنيّة مساعدة باستدعاء إجراءات مكونٍ برمجيًا. يجب أن تحتوي الخاصية <code>accessibilityActions</code> على قائمة كائنات إجراءات (action objects). يجب أن يحتوي كل كائن إجراء على اسم الحقل وعلى عنوان (label).


انظر [https://wiki.hsoub.com/ReactNative/accessibility دليل إمكانية الوصول] لمزيد من المعلومات.
انظر [[ReactNative/accessibility|دليل سهولة الوصول]] لمزيد من المعلومات.
{| class="wikitable"
{| class="wikitable"
!النوع
!النوع
سطر 164: سطر 184:
|}
|}
===‎‎<code>onAccessibilityAction</code>‎‎===
===‎‎<code>onAccessibilityAction</code>‎‎===
دالةٌ تُستدعى عند قيام المستخدم بتنفيذ إجراءات إمكانية الوصول. معامل هذه الدالة الوحيد هو حدثٌ يحتوي على اسم الإجراء المراد تنفيذه.
دالةٌ تُستدعى عند قيام المستخدم بتنفيذ إجراءات سهولة الوصول. معامل هذه الدالة الوحيد هو حدثٌ يحتوي على اسم الإجراء المراد تنفيذه.


انظر [https://wiki.hsoub.com/ReactNative/accessibility دليل إمكانية الوصول] لمزيد من المعلومات.
انظر [[ReactNative/accessibility#.D8.A5.D8.AC.D8.B1.D8.A7.D8.A1.D8.A7.D8.AA .D8.B3.D9.87.D9.88.D9.84.D8.A9 .D8.A7.D9.84.D9.88.D8.B5.D9.88.D9.84|دليل سهولة الوصول]] لمزيد من المعلومات.


{| class="wikitable"
{| class="wikitable"
سطر 176: سطر 196:
|}
|}
===‎‎<code>onAccessibilityTap</code>‎‎===
===‎‎<code>onAccessibilityTap</code>‎‎===
عندما تكون الخاصيّة ‎‎<code>accessible</code>‎‎ ذات القيمة ‎‎<code>true</code>‎‎، سيحاول النظام استدعاء هذه الدالة عندما يقوم المستخدم بإجراء إيماءةِ نقرِ إمكانيةِ وصول (accessibility tap gesture).
عندما تكون الخاصيّة ‎‎<code>accessible</code>‎‎ ذات القيمة ‎‎<code>true</code>‎‎، سيحاول النظام استدعاء هذه الدالة عندما يقوم المستخدم بإجراء إيماءةِ نقرِ سهل الوصول (accessibility tap gesture).


{| class="wikitable"
{| class="wikitable"
سطر 209: سطر 229:
|}
|}
===‎‎<code>accessibilityViewIsModal</code>‎‎===
===‎‎<code>accessibilityViewIsModal</code>‎‎===
قيمة تشير إلى ما إذا كان ينبغي على VoiceOver أن يتجاهل العناصر الموجودة داخل عروض المتلقي الأشقّاء. القيمة الافتراضيّة هي ‎‎<code>false</code>‎‎.
قيمة تشير إلى ما إذا كان ينبغي على تقنية VoiceOver أن يتجاهل العناصر الموجودة داخل واجهات المتلقي الأشقّاء. القيمة الافتراضيّة هي ‎‎<code>false</code>‎‎.


انظر [https://wiki.hsoub.com/ReactNative/accessibility دليل إمكانية الوصول] لمزيد من المعلومات.
انظر [[ReactNative/accessibility#accessibilityViewIsModal .28.D9.81.D9.8A iOS .D9.81.D9.82.D8.B7.29|دليل سهولة الوصول]] لمزيد من المعلومات.


{| class="wikitable"
{| class="wikitable"
سطر 224: سطر 244:


===‎‎<code>accessibilityElementsHidden</code>‎‎===
===‎‎<code>accessibilityElementsHidden</code>‎‎===
قيمة تشير إلى ما إذا كانت عناصر إمكانية الوصول الموجودة في عنصر إمكانية الوصول هذا مخفيةً أو لا. القيمة الافتراضيّة هي ‎‎<code>false</code>‎‎.
قيمة تشير إلى ما إذا كانت عناصر سهولة الوصول الموجودة في عنصر سهولة الوصول هذا مخفيةً أو لا. القيمة الافتراضيّة هي ‎‎<code>false</code>‎‎.


انظر [https://wiki.hsoub.com/ReactNative/accessibility دليل إمكانية الوصول] لمزيد من المعلومات.
انظر [[ReactNative/accessibility#accessibilityElementsHidden .28.D9.81.D9.8A iOS .D9.81.D9.82.D8.B7.29|دليل سهولة الوصول]] لمزيد من المعلومات.


{| class="wikitable"
{| class="wikitable"
سطر 238: سطر 258:
|}
|}
===‎‎<code>accessibilityIgnoresInvertColors</code>‎‎===
===‎‎<code>accessibilityIgnoresInvertColors</code>‎‎===
قيمةٌ تُشير إلى ما إذا كان ينبغي قلب هذا العرض عند تشغيل قلب الألوان (color inversion). القيمة ‎‎<code>true</code>‎‎ تُشير إلى عدم قلب العرض حتى إذا تم تشغيل قلب الألوان.
قيمةٌ تُشير إلى ما إذا كان ينبغي قلب هذه الواجهة عند تشغيل قلب الألوان (color inversion). القيمة ‎‎<code>true</code>‎‎ تُشير إلى عدم قلب الواجهة حتى إذا تم تشغيل قلب الألوان.


انظر [https://wiki.hsoub.com/ReactNative/accessibility دليل إمكانية الوصول] لمزيد من المعلومات.
انظر [[ReactNative/accessibility#accessibilityIgnoresInvertColors .28.D9.81.D9.8A iOS .D9.81.D9.82.D8.B7.29|دليل سهولة الوصول]] لمزيد من المعلومات.


{| class="wikitable"
{| class="wikitable"
سطر 252: سطر 272:
|}
|}
===‎‎<code>accessibilityLiveRegion</code>‎‎===
===‎‎<code>accessibilityLiveRegion</code>‎‎===
يشير إلى ما إذا كان ينبغي لخدمات إمكانية الوصول إعلام المستخدم عند تَغيُّر هذا العرض. يعمل في Android API المستوى 19 أو أحدث فقط. القيم الممكنة:
يشير إلى ما إذا كان ينبغي لخدمات سهولة الوصول إعلام المستخدم عند تَغيُّر هذه الواجهة. يعمل في Android API المستوى 19 أو أحدث فقط. القيم الممكنة:


* ‎‎<code>'none'</code>‎‎: يجب ألا تعلن خدمات إمكانية الوصول عن تغيُّرات هذا العرض.
* ‎‎<code>'none'</code>‎‎: يجب ألا تعلن خدمات سهولة الوصول عن تغيُّرات هذه الواجهة.
* ‎‎<code>'polite'</code>‎‎: يجب أن تعلن خدمات إمكانية الوصول عن تغيُّرات هذا العرض.
* ‎‎<code>'polite'</code>‎‎: يجب أن تعلن خدمات سهولة الوصول عن تغيُّرات هذه الواجهة.
* ‎‎<code>'assertive'</code>‎‎: يجب أن تُقاطع خدمات إمكانية الوصول الكلامَ الحالي للإعلان فورًا عن تغيُّرات هذا العرض.
* ‎‎<code>'assertive'</code>‎‎: يجب أن تُقاطع خدمات سهولة الوصول الكلامَ الحالي للإعلان فورًا عن تغيُّرات هذه الواجهة.


راجع [http://developer.android.com/reference/android/view/View.html#attr_android:accessibilityLiveRegion توثيق View على موقع Android] للمزيد.
راجع [http://developer.android.com/reference/android/view/View.html#attr_android:accessibilityLiveRegion توثيق View على موقع Android] للمزيد.
{| class="wikitable"
{| class="wikitable"
!النوع
!النوع
سطر 264: سطر 284:
!المنصة
!المنصة
|-
|-
|‎‎<code>enum('none', 'polite', 'assertive')</code>‎‎
|‎‎('none', 'polite', 'assertive')‎‎
|لا
|لا
|Android
|Android
|}
|}
===‎‎<code>importantForAccessibility</code>‎‎===
===‎‎<code>importantForAccessibility</code>‎‎===
تتحكم في مدى أهمية العرض لإمكانية الوصول، ويكون مُهمًّا إذا كان يُطلِق أحداث إمكانية الوصول (accessibility events) وإذا كان يُبلَّغ عنه إلى خدمات إمكانية الوصول (reported to accessibility services) التي تَسْتَعلِم الشاشة (query the screen). هذه خاصيّةٌ تعمل على نظام Android فقط.
تتحكم في مدى أهمية الواجهة لسهولة الوصول، ويكون مُهمًّا إذا كان يُطلِق أحداث سهولة الوصول (accessibility events) وإذا كان يُبلَّغ عنه إلى خدمات سهولة الوصول (reported to accessibility services) التي تَسْتَعلِم الشاشة (query the screen). هذه خاصيّةٌ تعمل على نظام Android فقط.


القيم الممكنة:
القيم الممكنة:


* ‎‎<code>'auto'</code>‎‎: يحدد النظام ما إذا كان العرض مُهمًا لإمكانيّة الوصول – القيمة الافتراضية (مستحسن).
* ‎‎<code>'auto'</code>‎‎: يحدد النظام ما إذا كان يجب مراعاة تحقيق سهولة الوصول في الواجهة  – القيمة الافتراضية (مستحسن).
* ‎‎<code>'yes'</code>‎‎: العرض مهم لإمكانيّة الوصول.
* ‎‎<code>'yes'</code>‎‎: يهم تحقيق سهولة الوصول للواجهة.
* ‎‎<code>'no'</code>‎‎: العرض ليس مهمّا لإمكانيّة للوصول.
* ‎‎<code>'no'</code>‎‎: لا يهم تحقيق سهولة الوصول للواجهة.
* ‎‎<code>'no-hide-descendants'</code>‎‎: العرض ليس مهمّا لإمكانيّة للوصول ولا أي من مكوّناته الأحفاد.
* ‎‎<code>'no-hide-descendants'</code>‎‎: لا يهم تحقيق سهولة الوصول للواجهة ولا أي من مكوّناتها الأحفاد.
راجع [http://developer.android.com/reference/android/R.attr.html#importantForAccessibility توثيق importantForAccessibility على موقع Android] للمزيد.
راجع [http://developer.android.com/reference/android/R.attr.html#importantForAccessibility توثيق importantForAccessibility على موقع Android] للمزيد.


سطر 284: سطر 304:
!المنصة
!المنصة
|-
|-
|‎‎<code>enum('auto', 'yes', 'no', 'no-hide-descendants')</code>‎‎
|‎‎('auto', 'yes', 'no', 'no-hide-descendants')‎‎
|لا
|لا
|Android
|Android
|}
|}
===‎‎<code>hitSlop</code>‎‎===
===‎‎<code>hitSlop</code>‎‎===
تُحدد هذه الخاصيّة المدى الذي يمكن أن يبدأ فيه لمس الزّر بعيدًا عن العرض. توصي إرشادات الواجهة النموذجية بأهداف لمسٍ لا تقل عن 30 إلى 40 نقطة (وحدات بكسل مستقلّة عن الكثافة [density-independent pixels]).
تُحدد هذه الخاصيّة المدى الذي يمكن أن يبدأ فيه لمس الزّر بعيدًا عن الواجهة. توصي إرشادات الواجهة النموذجية بأهداف لمسٍ لا تقل عن 30 إلى 40 نقطة (وحدات بكسل مستقلّة عن الكثافة [density-independent pixels]).


على سبيل المثال، إذا كان عرض قابل للّمس ذا ارتفاعٍ يبلغ 20، يمكن تمديد ارتفاع الجزء القابل للّمس إلى 40 باستخدام: ‎‎<code><nowiki>hitSlop={{top: 10, bottom: 10, left: 0, right: 0}}</nowiki></code>‎‎.
على سبيل المثال، إذا كانت الواجهة قابلة للّمس ذا ارتفاعٍ يبلغ 20، يمكن تمديد ارتفاع الجزء القابل للّمس إلى 40 باستخدام: ‎‎<code><nowiki>hitSlop={{top: 10, bottom: 10, left: 0, right: 0}}</nowiki></code>‎‎.


'''ملاحظة:''' لا تمتد منطقة اللمس أبدًا بعد حدود العرض الأب، ودائمًا ما يأخذ مؤشر Z-index الخاص بالعروض الأشقّاء (المجاورة) الأولويّةَ إذا وقعت اللمسة على عرضين متداخلين.
'''ملاحظة:''' لا تمتد منطقة اللمس أبدًا بعد حدود الواجهة الأب، ودائمًا ما يأخذ مؤشر Z-index الخاص بالواجهات الأشقّاء (المجاورة) الأولويّةَ إذا وقعت اللمسة على واجهتين متداخلين.
{| class="wikitable"
{| class="wikitable"
!النوع
!النوع
!مطلوب
!مطلوب
|-
|-
|‎‎<code>object: {top: number, left: number, bottom: number, right: number}</code>‎‎
|‎‎كائن: {top: number, left: number, bottom: number, right: number}‎‎
|لا
|لا
|}
|}


===‎‎<code>nativeID</code>‎‎===
===‎‎<code>nativeID</code>‎‎===
تُستخدَم لتحديد موقع هذا العرض من الشيفرة الأصيلة.
تُستخدَم لتحديد موقع هذا الواجهة من الشيفرة الأصيلة.


'''ملاحظة:''' يؤدي هذا إلى تعطيل تحسين "إزالةُ عرضِ التخطيط فقط (layout-only view removal)" لهذا العرض!
'''ملاحظة:''' يؤدي هذا إلى تعطيل تحسين "إزالةُ واجهة التخطيط فقط (layout-only view removal)" لهذه الواجهة!
{| class="wikitable"
{| class="wikitable"
!النوع
!النوع
سطر 315: سطر 335:


===‎‎<code>onLayout</code>‎‎===
===‎‎<code>onLayout</code>‎‎===
دالةٌ تُستدعى عند حدوث تغيّرات التركيب والتخطيط مع الحدث ‎‎<code><nowiki>{nativeEvent: {layout: {x, y, width, height}}}</nowiki></code>‎‎.
دالةٌ تُستدعى عند وصل الواجهة (عرضها لأول مرة) أو حدوث تغيّرات في التخطيط.


يُطلَق هذا الحدث على الفور بمجرد حساب التخطيط، ولكن قد لا ينعكس التخطيط الجديد على الشاشة في وقت استلام الحدث، خاصة إذا كان تحريكُ تخطيطٍ (layout animation) قيد التحرُّك.
يُطلَق هذا الحدث على الفور بمجرد حساب التخطيط، ولكن قد لا ينعكس التخطيط الجديد على الشاشة في وقت استلام الحدث، خاصة إذا كان تحريكُ تخطيطٍ (layout animation) قيد التحرُّك.
سطر 322: سطر 342:
!مطلوب
!مطلوب
|-
|-
|دالة
|‎({ nativeEvent: [[ReactNative/layoutevent|LayoutEvent]] }) => 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"
!النوع
!النوع
!مطلوب
!مطلوب
|-
|-
|دالة
|‎({ nativeEvent: [[ReactNative/pressevent|PressEvent]] }) => void
|لا
|لا
|}
|}
سطر 340: سطر 358:
===‎‎<code>onMoveShouldSetResponderCapture</code>‎‎===
===‎‎<code>onMoveShouldSetResponderCapture</code>‎‎===
إذا أراد مُكوِّنُ  ‎‎<code>View</code>‎‎ أبٍ منع مكوّنِ  ‎‎<code>View</code>‎‎ ابنٍ من أن يصبح المستجيب أثناء تحريك المستخدم لإصبعه، فيجب أن يحتويَ على هذا المعالج مُعيدًا القيمة ‎‎<code>true</code>‎‎.
إذا أراد مُكوِّنُ  ‎‎<code>View</code>‎‎ أبٍ منع مكوّنِ  ‎‎<code>View</code>‎‎ ابنٍ من أن يصبح المستجيب أثناء تحريك المستخدم لإصبعه، فيجب أن يحتويَ على هذا المعالج مُعيدًا القيمة ‎‎<code>true</code>‎‎.
‎‎<code>View.props.onMoveShouldSetResponderCapture: (event) => [true | false]</code>‎‎، بحيث يكون ‎‎<code>event</code>‎‎ حدثَ لمسٍ اصطناعيّ كما هو موضح أعلاه.


{| class="wikitable"
{| class="wikitable"
سطر 347: سطر 363:
!مطلوب
!مطلوب
|-
|-
|دالة
|‎({ nativeEvent: [[ReactNative/pressevent|PressEvent]] }) => void
|لا
|لا
|}
|}
===‎‎<code>onResponderGrant</code>‎‎===
===‎‎<code>onResponderGrant</code>‎‎===
يستجيب العرض الآن لأحداث اللمس. هذا هو الوقت المناسب لإبراز وإظهار ما يحدث للمستخدم. مثال: ‎‎<code>View.props.onResponderGrant: (event) => {}</code>‎‎، بحيث يكون ‎‎<code>event</code>‎‎ حدثَ لمسٍ اصطناعيّ كما هو موضح أعلاه.
تستجيب الواجهة الآن لأحداث اللمس. هذا هو الوقت المناسب لإبراز وإظهار ما يحدث للمستخدم.


{| class="wikitable"
{| class="wikitable"
سطر 357: سطر 373:
!مطلوب
!مطلوب
|-
|-
|دالة
|‎({ nativeEvent: [[ReactNative/pressevent|PressEvent]] }) => void
|لا
|لا
|}
|}


===‎‎<code>onResponderMove</code>‎‎===
===‎‎<code>onResponderMove</code>‎‎===
عندما يُحرِّك المستخدمُ إصبعه. مثال: ‎‎<code>View.props.onResponderMove: (event) => {}</code>‎‎، بحيث يكون ‎‎<code>event</code>‎‎ حدثَ لمسٍ اصطناعيّ كما هو موضح أعلاه.
عندما يُحرِّك المستخدمُ إصبعه.


{| class="wikitable"
{| class="wikitable"
سطر 368: سطر 384:
!مطلوب
!مطلوب
|-
|-
|دالة
|‎({ nativeEvent: [[ReactNative/pressevent|PressEvent]] }) => void
|لا
|لا
|}
|}
===‎‎<code>onResponderReject</code>‎‎===
===‎‎<code>onResponderReject</code>‎‎===
دالةٌ تُستدعى عندما يكون مستجيبٌ آخر نشِطًا ولا يُحرِّره للعرض الذي يُريد أن يكون المستجيب.
دالةٌ تُستدعى عندما يكون مستجيبٌ آخر نشِطًا ولا يُحرِّره للواجهة التي تريد أن يكون المستجيب.
 
مثال: ‎‎<code>View.props.onResponderReject: (event) => {}</code>‎‎، بحيث يكون ‎‎<code>event</code>‎‎ حدثَ لمسٍ اصطناعيّ كما هو موضح أعلاه.


{| class="wikitable"
{| class="wikitable"
سطر 380: سطر 394:
!مطلوب
!مطلوب
|-
|-
|دالة
|‎({ nativeEvent: [[ReactNative/pressevent|PressEvent]] }) => void
|لا
|لا
|}
|}


===‎‎<code>onResponderRelease</code>‎‎===
===‎‎<code>onResponderRelease</code>‎‎===
دالةٌ تُستدعى عند نهاية اللمس. مثال: ‎‎<code>View.props.onResponderRelease: (event) => {}</code>‎‎، بحيث يكون ‎‎<code>event</code>‎‎ حدثَ لمسٍ اصطناعيّ كما هو موضح أعلاه.
دالةٌ تُستدعى عند نهاية اللمس.


{| class="wikitable"
{| class="wikitable"
سطر 391: سطر 405:
!مطلوب
!مطلوب
|-
|-
|دالة
|‎({ 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"
!النوع
!النوع
!مطلوب
!مطلوب
|-
|-
|دالة
|‎({ nativeEvent: [[ReactNative/pressevent|PressEvent]] }) => void
|لا
|لا
|}
|}
===‎‎<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"
سطر 415: سطر 425:
!مطلوب
!مطلوب
|-
|-
|دالة
|‎({ nativeEvent: [[ReactNative/pressevent|PressEvent]] }) => void
|لا
|لا
|}
|}
سطر 421: سطر 431:
===‎‎<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"
سطر 428: سطر 436:
!مطلوب
!مطلوب
|-
|-
|دالة
|‎({ nativeEvent: [[ReactNative/pressevent|PressEvent]] }) => void
|لا
|لا
|}
|}


===‎‎<code>pointerEvents</code>‎‎===
===‎‎<code>pointerEvents</code>‎‎===
تتحكم في ما إذا كان العرض قادرًا على أن يكون هدفًا (target) لأحداث اللمس.
تتحكم في ما إذا كانت الواجة قادرة على أن تكون هدفًا (target) لأحداث اللمس.


* ‎‎<code>'auto'</code>‎‎: يمكن أن يكون العرض هدفًا لأحداث اللمس.
* ‎‎<code>'auto'</code>‎‎: يمكن أن تكون الواجهة هدفًا لأحداث اللمس.
* ‎‎<code>'none'</code>‎‎: لا يعد العرض هدفًا لأحداث اللمس أبدًا.
* ‎‎<code>'none'</code>‎‎: لا تعد الواجهة هدفًا لأحداث اللمس أبدًا.
* ‎‎<code>'box-none'</code>‎‎: لا يعد العرض هدفًا لأحداث اللمس أبدًا، ولكن يمكن أن تكون عروضه الفرعية أهدافًا. يتصرف العرض كما لو كان ذا الأصناف التالية في CSS:
* ‎‎<code>'box-none'</code>‎‎: لا تعد الواجهة هدفًا لأحداث اللمس أبدًا، ولكن يمكن أن تكون واجهاته الفرعية أهدافًا. تتصرف الواجة كما لو كانت تملك الأصناف التالية في [[CSS]]:
<syntaxhighlight lang="css">
<syntaxhighlight lang="css">
.box-none {
.box-none {
سطر 446: سطر 454:
}
}
</syntaxhighlight>
</syntaxhighlight>
* ‎‎<code>'box-only'</code>‎‎: يمكن أن يكون العرض هدفًا لأحداث اللمس، ولكنَّ عروضه الفرعية لا يُمكن لها أن تكون أهدافًا. يتصرف العرض كما لو كان ذا الأصناف التالية في CSS:
* ‎‎<code>'box-only'</code>‎‎: يمكن أن تكون الواجهة هدفًا لأحداث اللمس، ولكنَّ واجهاتها الفرعية لا يُمكن لها أن تكون أهدافًا. تتصرف الواجهة كما لو كانت تملك الأصناف التالية في [[CSS]]:
<syntaxhighlight lang="css">
<syntaxhighlight lang="css">
.box-only {
.box-only {
سطر 459: سطر 467:
!مطلوب
!مطلوب
|-
|-
|‎‎<code>enum('box-none', 'none', 'box-only', 'auto')</code>‎‎
|‎‎('box-none', 'none', 'box-only', 'auto')‎‎
|لا
|لا
|}
|}
===‎‎<code>removeClippedSubviews</code>‎‎===
===‎‎<code>removeClippedSubviews</code>‎‎===
هذه خاصيةُ أداءٍ محجوزة (reserved performance property) موفَّرةٌ من طرف ‎‎<code>RCTView</code>‎‎ وهي مفيدة لتمرير المحتوى عندما يكون هناك العديد من العروض الفرعية، ويكون معظمها خارج الشاشة. لكي تكون هذه الخاصية فعالة، يجب تطبيقها على عرض يحتوي على العديد من العروض الفرعية التي تمتد خارج نطاقه. يجب أن تحتوي العروض الفرعية أيضًا على الخاصيّة ‎‎<code>overflow: hidden</code>‎‎، كما يجب أن يحتويَ عليها العرض الحاوي (أو أحد عروضه الآباء).
هذه خاصيةُ أداءٍ محجوزة (reserved performance property) موفَّرةٌ من طرف ‎‎<code>RCTView</code>‎‎ وهي مفيدة لتمرير المحتوى عندما يكون هناك العديد من الواجهات الفرعية، ويكون معظمها خارج الشاشة. لكي تكون هذه الخاصية فعالة، يجب تطبيقها على واجهة تحتوي على العديد من الواجهات الفرعية التي تمتد خارج نطاقه. يجب أن تحتوي الواجهات الفرعية أيضًا على الخاصيّة ‎‎<code>overflow: hidden</code>‎‎، كما يجب أن تحتوي عليها الواجهة الحاوية (أو أحد واجهاتها الآباء).


{| class="wikitable"
{| class="wikitable"
سطر 478: سطر 486:
!مطلوب
!مطلوب
|-
|-
|تنسيقات العرض
|[[ReactNative/view style props|تنسيقات العرض]]
|لا
|لا
|}
|}
===‎‎<code>testID</code>‎‎===
===‎‎<code>testID</code>‎‎===
يُستخدَم لتحديد موقع هذا العرض في الاختبارات الشاملة (end-to-end tests).
يُستخدَم لتحديد موقع هذه الواجهة في الاختبارات الشاملة (end-to-end tests).


'''ملاحظة:''' يؤدي هذا إلى تعطيل تحسين "إزالةُ عرضِ التخطيط فقط (layout-only view removal)" لهذا العرض!
'''ملاحظة:''' يؤدي هذا إلى تعطيل تحسين "إزالةُ واجهة التخطيط فقط (layout-only view removal)" لهذه الواجهة!
{| class="wikitable"
{| class="wikitable"
!النوع
!النوع
سطر 493: سطر 501:
|}
|}
===‎‎<code>collapsable</code>‎‎===
===‎‎<code>collapsable</code>‎‎===
العروض التي تُستخدَم فقط لتخطيط المكونات الأبناء، أو تلك التي لا تَرسُمُ أي شيء، قد تُزال تلقائيًا من التسلسل الهرمي الأصيل (native hierarchy) كتحسين. عيّن القيمة ‎‎<code>false</code>‎‎ لهذه الخاصية لتعطيل هذا التحسين والتأكّد من وجود هذا العرض في التسلسل الهرمي الأصيل للعروض.
الواجهات التي تُستخدَم فقط لتخطيط المكونات الأبناء، أو تلك التي لا تَرسُمُ أي شيء، قد تُزال تلقائيًا من التسلسل الهرمي الأصيل (native hierarchy) كتحسين. عيّن القيمة ‎‎<code>false</code>‎‎ لهذه الخاصية لتعطيل هذا التحسين والتأكّد من وجود هذه الواجهة في التسلسل الهرمي الأصيل للواجهات.


{| class="wikitable"
{| class="wikitable"
سطر 505: سطر 513:
|}
|}
===‎‎<code>needsOffscreenAlphaCompositing</code>‎‎===
===‎‎<code>needsOffscreenAlphaCompositing</code>‎‎===
ما إذا كان هذا العرض يحتاج إلى تصييره خارج الشاشة وتكوينه باستخدام قيمة ألفا من أجل الحفاظ على الألوان الصحيحة وسلوك المزج بنسبة 100٪. يلجأ الإعداد الافتراضي (<code>false</code>) إلى رسم المكون وأبناءه باستخدام قيمة ألفا مُطبقّة على الطلاء المستخدم لرسم كل عنصر بدلاً من تصيير كامل المكوّن خارج الشاشة وتكوينه مرة أخرى بقيمة ألفا. قد يكون هذا الإعداد الافتراضي بارزًا وغير مرغوب فيه في الحالة التي يحتوي فيها العرض الذي تقوم بتعيين العتامة له على عدة عناصر متداخلة (كعروض متعددة متداخلة أو نصٍّ وخلفية).
ما إذا كان هذه الواجهة تحتاج إلى تصييرها خارج الشاشة وتكوينه باستخدام قيمة ألفا من أجل الحفاظ على الألوان الصحيحة وسلوك المزج بنسبة 100٪. يلجأ الإعداد الافتراضي (<code>false</code>) إلى رسم المكون وأبناءه باستخدام قيمة ألفا مُطبقّة على الطلاء المستخدم لرسم كل عنصر بدلاً من تصيير كامل المكوّن خارج الشاشة وتكوينه مرة أخرى بقيمة ألفا. قد يكون هذا الإعداد الافتراضي بارزًا وغير مرغوب فيه في الحالة التي تحتوي فيها الواجهة التي تقوم بتعيين العتامة لها على عدة عناصر متداخلة (كواجهات متعددة متداخلة أو نصٍّ وخلفية).


التصيير خارج الشاشة للحفاظ على سلوك ألفا الصحيح مُكلِّف وصعب التنقيح لمطوري التطبيقات غير الأصيلة، ولهذا السبب فهو غير مُمكَّن افتراضيًا. إذا كنت بحاجة إلى تمكين هذه الخاصية لتحريكٍ ما، فجرّب دمجها مع الخاصيّة ‎‎<code>renderToHardwareTextureAndroid</code>‎‎ إذا كانت محتويات العرض ثابتة (أي لا يلزم إعادة رسمها في كل إطار). إذا مُكِّنت تلك الخاصية، فسيُصيَّر هذا العرض خارج الشاشة مرة واحدة، وسيُحفَظ في تركيب عتاد (hardware texture)، ثم سيُكوَّن على الشاشة باستخدام قيمة ألفا لكل إطار دون الحاجة إلى تبديل أهداف التصيير على وحدة معالجة الرسومات (GPU).
التصيير خارج الشاشة للحفاظ على سلوك ألفا الصحيح مُكلِّف وصعب التنقيح لمطوري التطبيقات غير الأصيلة، ولهذا السبب فهو غير مُمكَّن افتراضيًا. إذا كنت بحاجة إلى تمكين هذه الخاصية لتحريكٍ ما، فجرّب دمجها مع الخاصيّة ‎‎<code>renderToHardwareTextureAndroid</code>‎‎ إذا كانت محتويات الواجهة ثابتة (أي لا يلزم إعادة رسمها في كل إطار). إذا مُكِّنت تلك الخاصية، فستُصيَّر هذه الواجهة خارج الشاشة مرة واحدة، وسيُحفَظ في تركيب عتاد (hardware texture)، ثم سيُكوَّن على الشاشة باستخدام قيمة ألفا لكل إطار دون الحاجة إلى تبديل أهداف التصيير على وحدة معالجة الرسومات (GPU).


{| class="wikitable"
{| class="wikitable"
سطر 518: سطر 526:


===‎‎<code>renderToHardwareTextureAndroid</code>‎‎===
===‎‎<code>renderToHardwareTextureAndroid</code>‎‎===
ما إذا ينبغي أن يُصيِّر هذا العرض نفسه (وجميع أبنائه) في تركيب عتاد واحد على وحدة معالجة الرسومات.
ما إذا ينبغي أن تصيِّر هذه الواجهة نفسه (وجميع أبنائه) في تركيب عتاد واحد على وحدة معالجة الرسومات.


هذا مفيدٌ على نظام Android للتحريكات والتفاعلات التي تُعدِّل فقط العتامة (opacity)، التدوير (rotation)، النقل (translation)، و/أو المقياس (scale): في هذه الحالات، لا يلزم إعادة رسم العرض ولن تحتاج قوائم العرض إلى إعادة التنفيذ. يمكن إعادة استخدام التركيب وإعادة تكوينه بمعاملات مختلفة. الجانب السلبي هو أن هذا قد يستخدم ذاكرة الفيديو المحدودة، لذلك يجب أن يُعاد تعيين القيمة ‎‎<code>false</code>‎‎ لهذه الخاصيّة في نهاية التفاعل أو التحريك.
هذا مفيدٌ على نظام Android للتحريكات والتفاعلات التي تُعدِّل فقط العتامة (opacity)، التدوير (rotation)، النقل (translation)، و/أو المقياس (scale): في هذه الحالات، لا يلزم إعادة رسم الواجهة ولن تحتاج قوائم الواجهة إلى إعادة التنفيذ. يمكن إعادة استخدام التركيب وإعادة تكوينه بمعاملات مختلفة. الجانب السلبي هو أن هذا قد يستخدم ذاكرة الفيديو المحدودة، لذلك يجب أن يُعاد تعيين القيمة ‎‎<code>false</code>‎‎ لهذه الخاصيّة في نهاية التفاعل أو التحريك.


{| class="wikitable"
{| class="wikitable"
سطر 532: سطر 540:
|}
|}
===‎‎<code>shouldRasterizeIOS</code>‎‎===
===‎‎<code>shouldRasterizeIOS</code>‎‎===
ما إذا كان ينبغي تصيير هذا العرض كصورة نقطية (bitmap) قبل التركيب.
ما إذا كان ينبغي تصيير هذه الواجهة كصورة نقطية (bitmap) قبل التركيب.


هذا مفيدٌ على نظام iOS للتحريكات والتفاعلات التي لا تُعدِّل أبعاد هذا المكون ولا أبعاد مكوناته الأبناء؛ على سبيل المثال، عند نقل (translating) موضع (position) عرضٍ ثابت، يتيح التنقيط (rasterization) للمُصيِّر إعادةَ استخدام صورة نقطية مخزنة مؤقتًا (أو مُخبّأة: cached) لعرضٍ ثابت وتركيبها بسرعة أثناء كل إطار.
هذا مفيدٌ على نظام iOS للتحريكات والتفاعلات التي لا تُعدِّل أبعاد هذا المكون ولا أبعاد مكوناته الأبناء؛ على سبيل المثال، عند نقل موضع واجهة ثابتة (static view)، يتيح التحويل إلى نوع نقطي (rasterization) للمُصيِّر إعادةَ استخدام صورة نقطية مخزنة مؤقتًا (أو مُخبّأة: cached) لواجهة ثابتة ووصلها وعرضها بسرعة أثناء كل إطار.


يجلبُ التنقيط مرور رسمٍ خارج الشاشة وتستهلك الصورة النقطية الذاكرة. اختبر وقِس عند استخدام هذه الخاصية.
يجلبُ التنقيط مرور رسمٍ خارج الشاشة وتستهلك الصورة النقطية الذاكرة. اختبر وقِس عند استخدام هذه الخاصية.
سطر 548: سطر 556:


===‎‎<code>nextFocusDown</code>‎‎===
===‎‎<code>nextFocusDown</code>‎‎===
تُحدِّد العرض التالي الذي سيستقبل التركيز عندما ينتقل المستخدم لأسفل. [https://developer.android.com/reference/android/view/View.html#attr_android:nextFocusDown انظر توثيق Android].  
تُحدِّد الواجهة التالية التي ستستقبل التركيز عندما ينتقل المستخدم لأسفل. [https://developer.android.com/reference/android/view/View.html#attr_android:nextFocusDown انظر توثيق Android].  
[[تصنيف:ReactNative]]
[[تصنيف:ReactNative]]
{| class="wikitable"
{| class="wikitable"
سطر 560: سطر 568:
|}
|}
===‎‎<code>nextFocusForward</code>‎‎===
===‎‎<code>nextFocusForward</code>‎‎===
تُحدِّد العرض التالي الذي سيستقبل التركيز عندما ينتقل المستخدم للأمام. [https://developer.android.com/reference/android/view/View.html#attr_android:nextFocusForward انظر توثيق Android].
تُحدِّد الواجهة التالية التي ستستقبل التركيز عندما ينتقل المستخدم للأمام. [https://developer.android.com/reference/android/view/View.html#attr_android:nextFocusForward انظر توثيق Android].
{| class="wikitable"
{| class="wikitable"
!النوع
!النوع
سطر 572: سطر 580:


===‎‎<code>nextFocusLeft</code>‎‎===
===‎‎<code>nextFocusLeft</code>‎‎===
تُحدِّد العرض التالي الذي سيستقبل التركيز عندما ينتقل المستخدم لليسار. [https://developer.android.com/reference/android/view/View.html#attr_android:nextFocusLeft انظر توثيق Android].
تُحدِّد الواجهة التالية التي ستستقبل التركيز عندما ينتقل المستخدم لليسار. [https://developer.android.com/reference/android/view/View.html#attr_android:nextFocusLeft انظر توثيق Android].
{| class="wikitable"
{| class="wikitable"
!النوع
!النوع
سطر 584: سطر 592:


===‎‎<code>nextFocusRight</code>‎‎===
===‎‎<code>nextFocusRight</code>‎‎===
تُحدِّد العرض التالي الذي سيستقبل التركيز عندما ينتقل المستخدم لليمين. [https://developer.android.com/reference/android/view/View.html#attr_android:nextFocusRight انظر توثيق Android].
تُحدِّد الواجهة التالية التي ستستقبل التركيز عندما ينتقل المستخدم لليمين. [https://developer.android.com/reference/android/view/View.html#attr_android:nextFocusRight انظر توثيق Android].
{| class="wikitable"
{| class="wikitable"
!النوع
!النوع
سطر 596: سطر 604:


===‎‎<code>nextFocusUp</code>‎‎===
===‎‎<code>nextFocusUp</code>‎‎===
تُحدِّد العرض التالي الذي سيستقبل التركيز عندما ينتقل المستخدم لأعلى. [https://developer.android.com/reference/android/view/View.html#attr_android:nextFocusUp انظر توثيق Android].
تُحدِّد الواجهة التالية التي ستستقبل التركيز عندما ينتقل المستخدم لأعلى. [https://developer.android.com/reference/android/view/View.html#attr_android:nextFocusUp انظر توثيق Android].
{| class="wikitable"
{| class="wikitable"
!النوع
!النوع
سطر 608: سطر 616:


===‎‎<code>clickable</code>‎‎===
===‎‎<code>clickable</code>‎‎===
لتحديد ما إذا كان هذا العرض قابلًا للنقر أو قابلا للّمس للحصول على تلميحات إمكانية الوصول.
لتحديد ما إذا كانت هذه الواجهة قابلةً للنقر أو قابلة للّمس للحصول على تلميحات سهولة الوصول.


{| class="wikitable"
{| class="wikitable"
سطر 620: سطر 628:
|}
|}
== مصادر ==
== مصادر ==
* [https://facebook.github.io/react-native/docs/view صفحة View في توثيق React Native الرسمي.]
* [https://reactnative.dev/docs/view صفحة View في توثيق React Native الرسمي.]

مراجعة 12:00، 1 أكتوبر 2021

المُكوِّن ‎‎View‎‎ هو المكوِّن الأساسيّ لبناء واجهة مستخدم، وهو‎‎ حاوية تدعم التخطيط باستخدام flexbox،وتدعم التنسيق، وبعض مبادئ معالجة اللمسات، وأدوات التحكم في سهولة الوصول. يُربَطُ المُكوِّن ‎‎View‎‎ مباشرةً مع الواجهة الأصيلة التي تُعادله حسب نظام التشغيل الذي يعمل عليه React Native، سواء أكان ذلك واجهة UIView‎‎، أو عنصر ‎‎<div>‎‎، أو واجهة ‎‎android.view‎‎ وما إلى ذلك.

صُمِّم المُكوِّن ‎‎View‎‎ ليتداخل داخل واجهات View أخرى ويمكن أن لا يحتوي على أي عناصر أبناء كما يُمكن أن يحتوي على العديد من العناصر الأبناء من أي نوع.

ملاحظة: سنطلق على هذا المكون اسم "واجهة" واسم "عرض" بالتبادل لأنه واجهة تَعرض شيئًا بداخلها فجاءت معنى واجهة ومعنى عرض، لذا قد تجد كلا الاسمين في توثيق React Native العربي مستعملان يشيران إلى View وإن كانت وتيرة "عرض" أقل حتى لا تتعارض مع عرض التي تشير إلى width لذلك حرصنا في تلك السياقات لتجنب التعارض وضع المصطلح الأجنبي بجانبها.

مثال

يُنشئ هذا المثال مُكوِّن ‎‎View‎‎ يُغلِّف صندوقين ملونين ومكونَ نصٍّ في صف مع حشو (padding):

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

const ViewBoxesWithColorAndText = () => {
  return (
    <View
      style={{
        flexDirection: "row",
        height: 100,
        padding: 20
      }}
    >
      <View style={{ backgroundColor: "blue", flex: 0.3 }} />
      <View style={{ backgroundColor: "red", flex: 0.5 }} />
      <Text>Hello World!</Text>
    </View>
  );
};

export default ViewBoxesWithColorAndText;
import React, { Component } from "react";
import { View, Text } from "react-native";

class App extends Component {
  render() {
    return (
      <View
        style={{
          flexDirection: "row",
          height: 100,
          padding: 20
        }}
      >
        <View style={{ backgroundColor: "blue", flex: 0.3 }} />
        <View style={{ backgroundColor: "red", flex: 0.5 }} />
        <Text>Hello World!</Text>
      </View>
    );
  }
}

export default App;

صُمِّمت مكوّنات ‎ View‎‎‎لتُستخدَم مع كائن StyleSheet من أجل الوضوح وتحسين الأداء، رغم أنّ التنسيقات السطريّة (inline styles) مدعومة أيضًا.

أحداث اللمس الاصطناعية ‎‎ (Synthetic Touch Events)

بالنسبة لخاصيات مُستجيب (responder) المُكوِّن ‎‎View‎‎ (الخاصيّة ‎‎onResponderMove‎‎ مثلا)، يكون حدث اللمس الاصطناعي الذي يُمرَّر إليها على شكل الكائن PressEvent.

الخاصيات

‎‎onStartShouldSetResponder‎‎

هل تريد هذه الواجهة أن تصبح مستجيبةً عند بدء اللمس؟

مثال: ‎‎View.props.onStartShouldSetResponder: (event) => [true | false]‎‎، بحيث يكون ‎‎event‎‎ حدثَ لمسٍ اصطناعيّ كما هو موضح أعلاه (أي على شكل الكائن PressEvent).

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

‎‎accessible‎‎

عندما تكون قيمتُها القيمةَ ‎‎true‎‎، فهذا يُشير إلى أنّ الواجهة هي عنصرُ سهل الوصول (accessibility element) لكافة المستخدمين. افتراضيًّا، جميع العناصر القابلة للمس هي عناصر سهلة وصول.

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

‎‎accessibilityLabel‎‎

تستبدِل النص الذي يقرأه قارئ الشاشة عندما يتفاعل المستخدم مع العنصر. افتراضيًا، يُنشأ العنوان أو التسمية (label) عن طريق العبور عبر جميع المكوّنات الأبناء وتجميع كافة العقد النصية Text مفصولةً بمسافة.

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

‎‎accessibilityHint‎‎

يُساعد تلميح سهولة وصول (accessibility hint) المستخدمينَ على فهم ما سيحدث عندما يقومون بإجراءٍ على عنصر سهولة الوصول عندما لا تكون النتيجة واضحةً من عنوان سهولة الوصول accessibilityLabel‎‎.

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

‎‎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‎‎

تصف الحالة الحالية لمكوّنٍ ما لمستخدمِ تقنيةٍ مساعدة.

انظر دليل سهولة الوصول لمزيد من المعلومات.

النوع مطلوب
‎‎كائن: {disabled: bool, selected: bool, checked: bool or 'mixed', busy: bool, expanded: bool}‎‎ لا

‎‎accessibilityValue‎‎

تُمثل القيمة الحالية للمكون. يمكن أن تكون قيمتها وصفًا نصيًا لقيمة المكون، ويمكن أن تحتوي على معلومات المجال (الحد الأدنى [minimum]، القيمة الحالية [current]، والحد الأقصى [maximum]) للمكونات المعتمدة على النطاق (range-based components)، كأشرطة التمرير (sliders) وأشرطة التقدم (progress bars).

انظر دليل سهولة الوصول لمزيد من المعلومات.

النوع مطلوب
كائن: {min: number, max: number, now: number, text: string} لا

‎‎accessibilityActions‎‎

تسمح إجراءات سهولة الوصول (Accessibility actions) لتقنيّة مساعدة باستدعاء إجراءات مكونٍ برمجيًا. يجب أن تحتوي الخاصية accessibilityActions على قائمة كائنات إجراءات (action objects). يجب أن يحتوي كل كائن إجراء على اسم الحقل وعلى عنوان (label).

انظر دليل سهولة الوصول لمزيد من المعلومات.

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

‎‎onAccessibilityAction‎‎

دالةٌ تُستدعى عند قيام المستخدم بتنفيذ إجراءات سهولة الوصول. معامل هذه الدالة الوحيد هو حدثٌ يحتوي على اسم الإجراء المراد تنفيذه.

انظر دليل سهولة الوصول لمزيد من المعلومات.

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

‎‎onAccessibilityTap‎‎

عندما تكون الخاصيّة ‎‎accessible‎‎ ذات القيمة ‎‎true‎‎، سيحاول النظام استدعاء هذه الدالة عندما يقوم المستخدم بإجراء إيماءةِ نقرِ سهل الوصول (accessibility tap gesture).

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

‎‎onMagicTap‎‎

عندما تكون الخاصيّة ‎‎accessible‎‎ ذات القيمة ‎‎true‎‎، سيستدعي النظام هذه الدالة عندما يقوم المستخدم بإجراء إيماءةِ نقر سحريّة (magic tap gesture).

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

‎‎onAccessibilityEscape‎‎

عندما تكون الخاصيّة ‎‎accessible‎‎ ذات القيمة ‎‎true‎‎، سيستدعي النظام هذه الدالة عندما يقوم المستخدم بإجراء إيماءةِ إفلات (escape gesture).

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

‎‎accessibilityViewIsModal‎‎

قيمة تشير إلى ما إذا كان ينبغي على تقنية VoiceOver أن يتجاهل العناصر الموجودة داخل واجهات المتلقي الأشقّاء. القيمة الافتراضيّة هي ‎‎false‎‎.

انظر دليل سهولة الوصول لمزيد من المعلومات.

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

‎‎accessibilityElementsHidden‎‎

قيمة تشير إلى ما إذا كانت عناصر سهولة الوصول الموجودة في عنصر سهولة الوصول هذا مخفيةً أو لا. القيمة الافتراضيّة هي ‎‎false‎‎.

انظر دليل سهولة الوصول لمزيد من المعلومات.

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

‎‎accessibilityIgnoresInvertColors‎‎

قيمةٌ تُشير إلى ما إذا كان ينبغي قلب هذه الواجهة عند تشغيل قلب الألوان (color inversion). القيمة ‎‎true‎‎ تُشير إلى عدم قلب الواجهة حتى إذا تم تشغيل قلب الألوان.

انظر دليل سهولة الوصول لمزيد من المعلومات.

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

‎‎accessibilityLiveRegion‎‎

يشير إلى ما إذا كان ينبغي لخدمات سهولة الوصول إعلام المستخدم عند تَغيُّر هذه الواجهة. يعمل في Android API المستوى 19 أو أحدث فقط. القيم الممكنة:

  • ‎‎'none'‎‎: يجب ألا تعلن خدمات سهولة الوصول عن تغيُّرات هذه الواجهة.
  • ‎‎'polite'‎‎: يجب أن تعلن خدمات سهولة الوصول عن تغيُّرات هذه الواجهة.
  • ‎‎'assertive'‎‎: يجب أن تُقاطع خدمات سهولة الوصول الكلامَ الحالي للإعلان فورًا عن تغيُّرات هذه الواجهة.

راجع توثيق View على موقع Android للمزيد.

النوع مطلوب المنصة
‎‎('none', 'polite', 'assertive')‎‎ لا Android

‎‎importantForAccessibility‎‎

تتحكم في مدى أهمية الواجهة لسهولة الوصول، ويكون مُهمًّا إذا كان يُطلِق أحداث سهولة الوصول (accessibility events) وإذا كان يُبلَّغ عنه إلى خدمات سهولة الوصول (reported to accessibility services) التي تَسْتَعلِم الشاشة (query the screen). هذه خاصيّةٌ تعمل على نظام Android فقط.

القيم الممكنة:

  • ‎‎'auto'‎‎: يحدد النظام ما إذا كان يجب مراعاة تحقيق سهولة الوصول في الواجهة – القيمة الافتراضية (مستحسن).
  • ‎‎'yes'‎‎: يهم تحقيق سهولة الوصول للواجهة.
  • ‎‎'no'‎‎: لا يهم تحقيق سهولة الوصول للواجهة.
  • ‎‎'no-hide-descendants'‎‎: لا يهم تحقيق سهولة الوصول للواجهة ولا أي من مكوّناتها الأحفاد.

راجع توثيق importantForAccessibility على موقع Android للمزيد.

النوع مطلوب المنصة
‎‎('auto', 'yes', 'no', 'no-hide-descendants')‎‎ لا Android

‎‎hitSlop‎‎

تُحدد هذه الخاصيّة المدى الذي يمكن أن يبدأ فيه لمس الزّر بعيدًا عن الواجهة. توصي إرشادات الواجهة النموذجية بأهداف لمسٍ لا تقل عن 30 إلى 40 نقطة (وحدات بكسل مستقلّة عن الكثافة [density-independent pixels]).

على سبيل المثال، إذا كانت الواجهة قابلة للّمس ذا ارتفاعٍ يبلغ 20، يمكن تمديد ارتفاع الجزء القابل للّمس إلى 40 باستخدام: ‎‎hitSlop={{top: 10, bottom: 10, left: 0, right: 0}}‎‎.

ملاحظة: لا تمتد منطقة اللمس أبدًا بعد حدود الواجهة الأب، ودائمًا ما يأخذ مؤشر Z-index الخاص بالواجهات الأشقّاء (المجاورة) الأولويّةَ إذا وقعت اللمسة على واجهتين متداخلين.

النوع مطلوب
‎‎كائن: {top: number, left: number, bottom: number, right: number}‎‎ لا

‎‎nativeID‎‎

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

ملاحظة: يؤدي هذا إلى تعطيل تحسين "إزالةُ واجهة التخطيط فقط (layout-only view removal)" لهذه الواجهة!

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

‎‎onLayout‎‎

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

يُطلَق هذا الحدث على الفور بمجرد حساب التخطيط، ولكن قد لا ينعكس التخطيط الجديد على الشاشة في وقت استلام الحدث، خاصة إذا كان تحريكُ تخطيطٍ (layout animation) قيد التحرُّك.

النوع مطلوب
‎({ nativeEvent: LayoutEvent }) => void لا

‎‎onMoveShouldSetResponder‎‎

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

النوع مطلوب
‎({ nativeEvent: PressEvent }) => void لا

‎‎onMoveShouldSetResponderCapture‎‎

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

النوع مطلوب
‎({ nativeEvent: PressEvent }) => void لا

‎‎onResponderGrant‎‎

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

النوع مطلوب
‎({ nativeEvent: PressEvent }) => void لا

‎‎onResponderMove‎‎

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

النوع مطلوب
‎({ nativeEvent: PressEvent }) => void لا

‎‎onResponderReject‎‎

دالةٌ تُستدعى عندما يكون مستجيبٌ آخر نشِطًا ولا يُحرِّره للواجهة التي تريد أن يكون المستجيب.

النوع مطلوب
‎({ 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 لا

‎‎pointerEvents‎‎

تتحكم في ما إذا كانت الواجة قادرة على أن تكون هدفًا (target) لأحداث اللمس.

  • ‎‎'auto'‎‎: يمكن أن تكون الواجهة هدفًا لأحداث اللمس.
  • ‎‎'none'‎‎: لا تعد الواجهة هدفًا لأحداث اللمس أبدًا.
  • ‎‎'box-none'‎‎: لا تعد الواجهة هدفًا لأحداث اللمس أبدًا، ولكن يمكن أن تكون واجهاته الفرعية أهدافًا. تتصرف الواجة كما لو كانت تملك الأصناف التالية في CSS:
.box-none {
     pointer-events: none;
}
.box-none * {
     pointer-events: auto;
}
  • ‎‎'box-only'‎‎: يمكن أن تكون الواجهة هدفًا لأحداث اللمس، ولكنَّ واجهاتها الفرعية لا يُمكن لها أن تكون أهدافًا. تتصرف الواجهة كما لو كانت تملك الأصناف التالية في CSS:
.box-only {
     pointer-events: auto;
}
.box-only * {
     pointer-events: none;
}

ملاحظة: نظرًا لأن ‎‎pointerEvents‎‎ لا تؤثر على التخطيط أو المظهر، ولأنّ React Native ينحرف عن المواصفة (spec) عبر إضافة أوضاعٍ (modes) إضافية، فإنّ المطورين قد اختاروا عدم تضمين الخاصيّة ‎‎pointerEvents‎‎ على ‎‎style‎‎. على بعض المنصات، سيحتاج المطورون إلى تطبيقها على شكل ‎‎className‎‎ على أي حال. استخدامُ ‎‎style‎‎ أو لا هو تفصيل تطبيق (implementation detail) خاص بالمنصّة.

النوع مطلوب
‎‎('box-none', 'none', 'box-only', 'auto')‎‎ لا

‎‎removeClippedSubviews‎‎

هذه خاصيةُ أداءٍ محجوزة (reserved performance property) موفَّرةٌ من طرف ‎‎RCTView‎‎ وهي مفيدة لتمرير المحتوى عندما يكون هناك العديد من الواجهات الفرعية، ويكون معظمها خارج الشاشة. لكي تكون هذه الخاصية فعالة، يجب تطبيقها على واجهة تحتوي على العديد من الواجهات الفرعية التي تمتد خارج نطاقه. يجب أن تحتوي الواجهات الفرعية أيضًا على الخاصيّة ‎‎overflow: hidden‎‎، كما يجب أن تحتوي عليها الواجهة الحاوية (أو أحد واجهاتها الآباء).

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

‎‎style‎‎

النوع مطلوب
تنسيقات العرض لا

‎‎testID‎‎

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

ملاحظة: يؤدي هذا إلى تعطيل تحسين "إزالةُ واجهة التخطيط فقط (layout-only view removal)" لهذه الواجهة!

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

‎‎collapsable‎‎

الواجهات التي تُستخدَم فقط لتخطيط المكونات الأبناء، أو تلك التي لا تَرسُمُ أي شيء، قد تُزال تلقائيًا من التسلسل الهرمي الأصيل (native hierarchy) كتحسين. عيّن القيمة ‎‎false‎‎ لهذه الخاصية لتعطيل هذا التحسين والتأكّد من وجود هذه الواجهة في التسلسل الهرمي الأصيل للواجهات.

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

‎‎needsOffscreenAlphaCompositing‎‎

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

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

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

‎‎renderToHardwareTextureAndroid‎‎

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

هذا مفيدٌ على نظام Android للتحريكات والتفاعلات التي تُعدِّل فقط العتامة (opacity)، التدوير (rotation)، النقل (translation)، و/أو المقياس (scale): في هذه الحالات، لا يلزم إعادة رسم الواجهة ولن تحتاج قوائم الواجهة إلى إعادة التنفيذ. يمكن إعادة استخدام التركيب وإعادة تكوينه بمعاملات مختلفة. الجانب السلبي هو أن هذا قد يستخدم ذاكرة الفيديو المحدودة، لذلك يجب أن يُعاد تعيين القيمة ‎‎false‎‎ لهذه الخاصيّة في نهاية التفاعل أو التحريك.

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

‎‎shouldRasterizeIOS‎‎

ما إذا كان ينبغي تصيير هذه الواجهة كصورة نقطية (bitmap) قبل التركيب.

هذا مفيدٌ على نظام iOS للتحريكات والتفاعلات التي لا تُعدِّل أبعاد هذا المكون ولا أبعاد مكوناته الأبناء؛ على سبيل المثال، عند نقل موضع واجهة ثابتة (static view)، يتيح التحويل إلى نوع نقطي (rasterization) للمُصيِّر إعادةَ استخدام صورة نقطية مخزنة مؤقتًا (أو مُخبّأة: cached) لواجهة ثابتة ووصلها وعرضها بسرعة أثناء كل إطار.

يجلبُ التنقيط مرور رسمٍ خارج الشاشة وتستهلك الصورة النقطية الذاكرة. اختبر وقِس عند استخدام هذه الخاصية.

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

‎‎nextFocusDown‎‎

تُحدِّد الواجهة التالية التي ستستقبل التركيز عندما ينتقل المستخدم لأسفل. انظر توثيق Android.

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

‎‎nextFocusForward‎‎

تُحدِّد الواجهة التالية التي ستستقبل التركيز عندما ينتقل المستخدم للأمام. انظر توثيق Android.

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

‎‎nextFocusLeft‎‎

تُحدِّد الواجهة التالية التي ستستقبل التركيز عندما ينتقل المستخدم لليسار. انظر توثيق Android.

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

‎‎nextFocusRight‎‎

تُحدِّد الواجهة التالية التي ستستقبل التركيز عندما ينتقل المستخدم لليمين. انظر توثيق Android.

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

‎‎nextFocusUp‎‎

تُحدِّد الواجهة التالية التي ستستقبل التركيز عندما ينتقل المستخدم لأعلى. انظر توثيق Android.

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

‎‎clickable‎‎

لتحديد ما إذا كانت هذه الواجهة قابلةً للنقر أو قابلة للّمس للحصول على تلميحات سهولة الوصول.

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

مصادر