الفرق بين المراجعتين لصفحة: «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> هو المكوِّن الأساسيّ لبناء واجهة مستخدم، وهو حاوية تدعم التخطيط باستخدام [[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 | 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: | flexDirection: "row", | ||
height: 100, | height: 100, | ||
padding: 20 | padding: 20 | ||
}}> | }} | ||
<View style={{backgroundColor: | > | ||
<View style={{backgroundColor: | <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>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>، فهذا يُشير إلى أنّ | عندما تكون قيمتُها القيمةَ <code>true</code>، فهذا يُشير إلى أنّ الواجهة هي عنصرُ [[ReactNative/accessibility|سهل الوصول]] (accessibility element) لكافة المستخدمين. افتراضيًّا، جميع العناصر القابلة للمس هي عناصر سهلة وصول. | ||
{| class="wikitable" | {| class="wikitable" | ||
سطر 66: | سطر 86: | ||
|} | |} | ||
===<code>accessibilityLabel</code>=== | ===<code>accessibilityLabel</code>=== | ||
تستبدِل النص الذي يقرأه قارئ الشاشة عندما يتفاعل المستخدم مع العنصر. افتراضيًا، يُنشأ | تستبدِل النص الذي يقرأه قارئ الشاشة عندما يتفاعل المستخدم مع العنصر. افتراضيًا، يُنشأ العنوان أو التسمية (label) عن طريق العبور عبر جميع المكوّنات الأبناء وتجميع كافة العقد النصية <code>Text</code> مفصولةً بمسافة. | ||
{| class="wikitable" | {| class="wikitable" | ||
سطر 77: | سطر 97: | ||
===<code>accessibilityHint</code>=== | ===<code>accessibilityHint</code>=== | ||
يُساعد تلميح | يُساعد تلميح سهولة وصول (accessibility hint) المستخدمينَ على فهم ما سيحدث عندما يقومون بإجراءٍ على عنصر سهولة الوصول عندما لا تكون النتيجة واضحةً من عنوان سهولة الوصول <code>accessibilityLabel</code>. | ||
{| class="wikitable" | {| class="wikitable" | ||
!النوع | !النوع | ||
سطر 129: | سطر 149: | ||
تصف الحالة الحالية لمكوّنٍ ما لمستخدمِ تقنيةٍ مساعدة. | تصف الحالة الحالية لمكوّنٍ ما لمستخدمِ تقنيةٍ مساعدة. | ||
انظر [ | انظر [[ReactNative/accessibility|دليل سهولة الوصول]] لمزيد من المعلومات. | ||
{| class="wikitable" | {| class="wikitable" | ||
سطر 135: | سطر 155: | ||
!مطلوب | !مطلوب | ||
|- | |- | ||
| | |كائن: {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). | ||
انظر [ | انظر [[ReactNative/accessibility|دليل سهولة الوصول]] لمزيد من المعلومات. | ||
{| class="wikitable" | {| class="wikitable" | ||
سطر 148: | سطر 168: | ||
!مطلوب | !مطلوب | ||
|- | |- | ||
| | |كائن: {min: number, max: number, now: number, text: string} | ||
|لا | |لا | ||
|} | |} | ||
===<code>accessibilityActions</code>=== | ===<code>accessibilityActions</code>=== | ||
تسمح إجراءات | تسمح إجراءات سهولة الوصول (Accessibility actions) لتقنيّة مساعدة باستدعاء إجراءات مكونٍ برمجيًا. يجب أن تحتوي الخاصية <code>accessibilityActions</code> على قائمة كائنات إجراءات (action objects). يجب أن يحتوي كل كائن إجراء على اسم الحقل وعلى عنوان (label). | ||
انظر [ | انظر [[ReactNative/accessibility|دليل سهولة الوصول]] لمزيد من المعلومات. | ||
{| class="wikitable" | {| class="wikitable" | ||
!النوع | !النوع | ||
سطر 164: | سطر 184: | ||
|} | |} | ||
===<code>onAccessibilityAction</code>=== | ===<code>onAccessibilityAction</code>=== | ||
دالةٌ تُستدعى عند قيام المستخدم بتنفيذ إجراءات | دالةٌ تُستدعى عند قيام المستخدم بتنفيذ إجراءات سهولة الوصول. معامل هذه الدالة الوحيد هو حدثٌ يحتوي على اسم الإجراء المراد تنفيذه. | ||
انظر [ | انظر [[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>، سيحاول النظام استدعاء هذه الدالة عندما يقوم المستخدم بإجراء إيماءةِ نقرِ | عندما تكون الخاصيّة <code>accessible</code> ذات القيمة <code>true</code>، سيحاول النظام استدعاء هذه الدالة عندما يقوم المستخدم بإجراء إيماءةِ نقرِ سهل الوصول (accessibility tap gesture). | ||
{| class="wikitable" | {| class="wikitable" | ||
سطر 209: | سطر 229: | ||
|} | |} | ||
===<code>accessibilityViewIsModal</code>=== | ===<code>accessibilityViewIsModal</code>=== | ||
قيمة تشير إلى ما إذا كان ينبغي على VoiceOver أن يتجاهل العناصر الموجودة داخل | قيمة تشير إلى ما إذا كان ينبغي على تقنية VoiceOver أن يتجاهل العناصر الموجودة داخل واجهات المتلقي الأشقّاء. القيمة الافتراضيّة هي <code>false</code>. | ||
انظر [ | انظر [[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>. | ||
انظر [ | انظر [[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> تُشير إلى عدم قلب الواجهة حتى إذا تم تشغيل قلب الألوان. | ||
انظر [ | انظر [[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 أو أحدث فقط. القيم الممكنة: | ||
* <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 | راجع [http://developer.android.com/reference/android/view/View.html#attr_android:accessibilityLiveRegion توثيق View على موقع Android] للمزيد. | ||
{| class="wikitable" | {| class="wikitable" | ||
!النوع | !النوع | ||
سطر 264: | سطر 284: | ||
!المنصة | !المنصة | ||
|- | |- | ||
| | |('none', 'polite', 'assertive') | ||
|لا | |لا | ||
|Android | |Android | ||
|} | |} | ||
===<code>importantForAccessibility</code>=== | ===<code>importantForAccessibility</code>=== | ||
تتحكم في مدى أهمية | تتحكم في مدى أهمية الواجهة لسهولة الوصول، ويكون مُهمًّا إذا كان يُطلِق أحداث سهولة الوصول (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: | ||
!المنصة | !المنصة | ||
|- | |- | ||
| | |('auto', 'yes', 'no', 'no-hide-descendants') | ||
|لا | |لا | ||
|Android | |Android | ||
|} | |} | ||
===<code>hitSlop</code>=== | ===<code>hitSlop</code>=== | ||
تُحدد هذه الخاصيّة المدى الذي يمكن أن يبدأ فيه لمس الزّر بعيدًا عن | تُحدد هذه الخاصيّة المدى الذي يمكن أن يبدأ فيه لمس الزّر بعيدًا عن الواجهة. توصي إرشادات الواجهة النموذجية بأهداف لمسٍ لا تقل عن 30 إلى 40 نقطة (وحدات بكسل مستقلّة عن الكثافة [density-independent pixels]). | ||
على سبيل المثال، إذا | على سبيل المثال، إذا كانت الواجهة قابلة للّمس ذا ارتفاعٍ يبلغ 20، يمكن تمديد ارتفاع الجزء القابل للّمس إلى 40 باستخدام: <code><nowiki>hitSlop={{top: 10, bottom: 10, left: 0, right: 0}}</nowiki></code>. | ||
'''ملاحظة:''' لا تمتد منطقة اللمس أبدًا بعد حدود | '''ملاحظة:''' لا تمتد منطقة اللمس أبدًا بعد حدود الواجهة الأب، ودائمًا ما يأخذ مؤشر Z-index الخاص بالواجهات الأشقّاء (المجاورة) الأولويّةَ إذا وقعت اللمسة على واجهتين متداخلين. | ||
{| class="wikitable" | {| class="wikitable" | ||
!النوع | !النوع | ||
!مطلوب | !مطلوب | ||
|- | |- | ||
| | |كائن: {top: number, left: number, bottom: number, right: number} | ||
|لا | |لا | ||
|} | |} | ||
===<code>nativeID</code>=== | ===<code>nativeID</code>=== | ||
تُستخدَم لتحديد موقع هذا | تُستخدَم لتحديد موقع هذا الواجهة من الشيفرة الأصيلة. | ||
'''ملاحظة:''' يؤدي هذا إلى تعطيل تحسين "إزالةُ | '''ملاحظة:''' يؤدي هذا إلى تعطيل تحسين "إزالةُ واجهة التخطيط فقط (layout-only view removal)" لهذه الواجهة! | ||
{| class="wikitable" | {| class="wikitable" | ||
!النوع | !النوع | ||
سطر 315: | سطر 335: | ||
===<code>onLayout</code>=== | ===<code>onLayout</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). | ||
{| 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>. | ||
{| class="wikitable" | {| class="wikitable" | ||
سطر 347: | سطر 363: | ||
!مطلوب | !مطلوب | ||
|- | |- | ||
| | |({ nativeEvent: [[ReactNative/pressevent|PressEvent]] }) => void | ||
|لا | |لا | ||
|} | |} | ||
===<code>onResponderGrant</code>=== | ===<code>onResponderGrant</code>=== | ||
تستجيب الواجهة الآن لأحداث اللمس. هذا هو الوقت المناسب لإبراز وإظهار ما يحدث للمستخدم. | |||
{| class="wikitable" | {| class="wikitable" | ||
سطر 357: | سطر 373: | ||
!مطلوب | !مطلوب | ||
|- | |- | ||
| | |({ nativeEvent: [[ReactNative/pressevent|PressEvent]] }) => void | ||
|لا | |لا | ||
|} | |} | ||
===<code>onResponderMove</code>=== | ===<code>onResponderMove</code>=== | ||
عندما يُحرِّك المستخدمُ إصبعه | عندما يُحرِّك المستخدمُ إصبعه. | ||
{| class="wikitable" | {| class="wikitable" | ||
سطر 368: | سطر 384: | ||
!مطلوب | !مطلوب | ||
|- | |- | ||
| | |({ nativeEvent: [[ReactNative/pressevent|PressEvent]] }) => void | ||
|لا | |لا | ||
|} | |} | ||
===<code>onResponderReject</code>=== | ===<code>onResponderReject</code>=== | ||
دالةٌ تُستدعى عندما يكون مستجيبٌ آخر نشِطًا ولا يُحرِّره | دالةٌ تُستدعى عندما يكون مستجيبٌ آخر نشِطًا ولا يُحرِّره للواجهة التي تريد أن يكون المستجيب. | ||
{| class="wikitable" | {| class="wikitable" | ||
سطر 380: | سطر 394: | ||
!مطلوب | !مطلوب | ||
|- | |- | ||
| | |({ nativeEvent: [[ReactNative/pressevent|PressEvent]] }) => void | ||
|لا | |لا | ||
|} | |} | ||
===<code>onResponderRelease</code>=== | ===<code>onResponderRelease</code>=== | ||
دالةٌ تُستدعى عند نهاية اللمس | دالةٌ تُستدعى عند نهاية اللمس. | ||
{| class="wikitable" | {| class="wikitable" | ||
سطر 391: | سطر 405: | ||
!مطلوب | !مطلوب | ||
|- | |- | ||
| | |({ nativeEvent: [[ReactNative/pressevent|PressEvent]] }) => void | ||
|لا | |لا | ||
|} | |} | ||
===<code>onResponderTerminate</code>=== | ===<code>onResponderTerminate</code>=== | ||
دالةٌ تُستدعى عندما يُأخَذ المستجيب من | دالةٌ تُستدعى عندما يُأخَذ المستجيب من الواجهة. قد تأخذه واجهات أخرى بعد استدعاء <code>onResponderTerminationRequest</code>، أو قد يأخذه نظام التشغيل دون طلب (يحدث هذا مع مركز التحكم أو مركز التنبيهات على iOS مثلًا). | ||
{| class="wikitable" | {| class="wikitable" | ||
!النوع | !النوع | ||
!مطلوب | !مطلوب | ||
|- | |- | ||
| | |({ nativeEvent: [[ReactNative/pressevent|PressEvent]] }) => void | ||
|لا | |لا | ||
|} | |} | ||
===<code>onResponderTerminationRequest</code>=== | ===<code>onResponderTerminationRequest</code>=== | ||
دالة تُستدعى عندما | دالة تُستدعى عندما تريد واجهة أخرى أن تصبح مستجيبًا ويطلب من هذا الواجهة تحرير المستجيب الخاص به. إعادة القيمة <code>true</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>. | ||
{| class="wikitable" | {| class="wikitable" | ||
سطر 428: | سطر 436: | ||
!مطلوب | !مطلوب | ||
|- | |- | ||
| | |({ nativeEvent: [[ReactNative/pressevent|PressEvent]] }) => void | ||
|لا | |لا | ||
|} | |} | ||
===<code>pointerEvents</code>=== | ===<code>pointerEvents</code>=== | ||
تتحكم في ما إذا | تتحكم في ما إذا كانت الواجة قادرة على أن تكون هدفًا (target) لأحداث اللمس. | ||
* <code>'auto'</code>: يمكن أن | * <code>'auto'</code>: يمكن أن تكون الواجهة هدفًا لأحداث اللمس. | ||
* <code>'none'</code>: لا | * <code>'none'</code>: لا تعد الواجهة هدفًا لأحداث اللمس أبدًا. | ||
* <code>'box-none'</code>: لا | * <code>'box-none'</code>: لا تعد الواجهة هدفًا لأحداث اللمس أبدًا، ولكن يمكن أن تكون واجهاته الفرعية أهدافًا. تتصرف الواجة كما لو كانت تملك الأصناف التالية في [[CSS]]: | ||
<syntaxhighlight lang="css"> | <syntaxhighlight lang="css"> | ||
.box-none { | .box-none { | ||
سطر 446: | سطر 454: | ||
} | } | ||
</syntaxhighlight> | </syntaxhighlight> | ||
* <code>'box-only'</code>: يمكن أن | * <code>'box-only'</code>: يمكن أن تكون الواجهة هدفًا لأحداث اللمس، ولكنَّ واجهاتها الفرعية لا يُمكن لها أن تكون أهدافًا. تتصرف الواجهة كما لو كانت تملك الأصناف التالية في [[CSS]]: | ||
<syntaxhighlight lang="css"> | <syntaxhighlight lang="css"> | ||
.box-only { | .box-only { | ||
سطر 459: | سطر 467: | ||
!مطلوب | !مطلوب | ||
|- | |- | ||
| | |('box-none', 'none', 'box-only', 'auto') | ||
|لا | |لا | ||
|} | |} | ||
===<code>removeClippedSubviews</code>=== | ===<code>removeClippedSubviews</code>=== | ||
هذه خاصيةُ أداءٍ محجوزة (reserved performance property) موفَّرةٌ من طرف <code>RCTView</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). | ||
'''ملاحظة:''' يؤدي هذا إلى تعطيل تحسين "إزالةُ | '''ملاحظة:''' يؤدي هذا إلى تعطيل تحسين "إزالةُ واجهة التخطيط فقط (layout-only view removal)" لهذه الواجهة! | ||
{| class="wikitable" | {| class="wikitable" | ||
!النوع | !النوع | ||
سطر 493: | سطر 501: | ||
|} | |} | ||
===<code>collapsable</code>=== | ===<code>collapsable</code>=== | ||
الواجهات التي تُستخدَم فقط لتخطيط المكونات الأبناء، أو تلك التي لا تَرسُمُ أي شيء، قد تُزال تلقائيًا من التسلسل الهرمي الأصيل (native hierarchy) كتحسين. عيّن القيمة <code>false</code> لهذه الخاصية لتعطيل هذا التحسين والتأكّد من وجود هذه الواجهة في التسلسل الهرمي الأصيل للواجهات. | |||
{| class="wikitable" | {| class="wikitable" | ||
سطر 505: | سطر 513: | ||
|} | |} | ||
===<code>needsOffscreenAlphaCompositing</code>=== | ===<code>needsOffscreenAlphaCompositing</code>=== | ||
ما إذا كان | ما إذا كان هذه الواجهة تحتاج إلى تصييرها خارج الشاشة وتكوينه باستخدام قيمة ألفا من أجل الحفاظ على الألوان الصحيحة وسلوك المزج بنسبة 100٪. يلجأ الإعداد الافتراضي (<code>false</code>) إلى رسم المكون وأبناءه باستخدام قيمة ألفا مُطبقّة على الطلاء المستخدم لرسم كل عنصر بدلاً من تصيير كامل المكوّن خارج الشاشة وتكوينه مرة أخرى بقيمة ألفا. قد يكون هذا الإعداد الافتراضي بارزًا وغير مرغوب فيه في الحالة التي تحتوي فيها الواجهة التي تقوم بتعيين العتامة لها على عدة عناصر متداخلة (كواجهات متعددة متداخلة أو نصٍّ وخلفية). | ||
التصيير خارج الشاشة للحفاظ على سلوك ألفا الصحيح مُكلِّف وصعب التنقيح لمطوري التطبيقات غير الأصيلة، ولهذا السبب فهو غير مُمكَّن افتراضيًا. إذا كنت بحاجة إلى تمكين هذه الخاصية لتحريكٍ ما، فجرّب دمجها مع الخاصيّة <code>renderToHardwareTextureAndroid</code> إذا كانت محتويات | التصيير خارج الشاشة للحفاظ على سلوك ألفا الصحيح مُكلِّف وصعب التنقيح لمطوري التطبيقات غير الأصيلة، ولهذا السبب فهو غير مُمكَّن افتراضيًا. إذا كنت بحاجة إلى تمكين هذه الخاصية لتحريكٍ ما، فجرّب دمجها مع الخاصيّة <code>renderToHardwareTextureAndroid</code> إذا كانت محتويات الواجهة ثابتة (أي لا يلزم إعادة رسمها في كل إطار). إذا مُكِّنت تلك الخاصية، فستُصيَّر هذه الواجهة خارج الشاشة مرة واحدة، وسيُحفَظ في تركيب عتاد (hardware texture)، ثم سيُكوَّن على الشاشة باستخدام قيمة ألفا لكل إطار دون الحاجة إلى تبديل أهداف التصيير على وحدة معالجة الرسومات (GPU). | ||
{| class="wikitable" | {| class="wikitable" | ||
سطر 518: | سطر 526: | ||
===<code>renderToHardwareTextureAndroid</code>=== | ===<code>renderToHardwareTextureAndroid</code>=== | ||
ما إذا ينبغي أن | ما إذا ينبغي أن تصيِّر هذه الواجهة نفسه (وجميع أبنائه) في تركيب عتاد واحد على وحدة معالجة الرسومات. | ||
هذا مفيدٌ على نظام Android للتحريكات والتفاعلات التي تُعدِّل فقط العتامة (opacity)، التدوير (rotation)، النقل (translation)، و/أو المقياس (scale): في هذه الحالات، لا يلزم إعادة رسم | هذا مفيدٌ على نظام Android للتحريكات والتفاعلات التي تُعدِّل فقط العتامة (opacity)، التدوير (rotation)، النقل (translation)، و/أو المقياس (scale): في هذه الحالات، لا يلزم إعادة رسم الواجهة ولن تحتاج قوائم الواجهة إلى إعادة التنفيذ. يمكن إعادة استخدام التركيب وإعادة تكوينه بمعاملات مختلفة. الجانب السلبي هو أن هذا قد يستخدم ذاكرة الفيديو المحدودة، لذلك يجب أن يُعاد تعيين القيمة <code>false</code> لهذه الخاصيّة في نهاية التفاعل أو التحريك. | ||
{| class="wikitable" | {| class="wikitable" | ||
سطر 532: | سطر 540: | ||
|} | |} | ||
===<code>shouldRasterizeIOS</code>=== | ===<code>shouldRasterizeIOS</code>=== | ||
ما إذا كان ينبغي تصيير | ما إذا كان ينبغي تصيير هذه الواجهة كصورة نقطية (bitmap) قبل التركيب. | ||
هذا مفيدٌ على نظام iOS للتحريكات والتفاعلات التي لا تُعدِّل أبعاد هذا المكون ولا أبعاد مكوناته الأبناء؛ على سبيل المثال، عند نقل | هذا مفيدٌ على نظام 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]. | ||
[[تصنيف: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]. | ||
{| 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]. | ||
{| 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]. | ||
{| 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]. | ||
{| class="wikitable" | {| class="wikitable" | ||
!النوع | !النوع | ||
سطر 608: | سطر 616: | ||
===<code>clickable</code>=== | ===<code>clickable</code>=== | ||
لتحديد ما إذا | لتحديد ما إذا كانت هذه الواجهة قابلةً للنقر أو قابلة للّمس للحصول على تلميحات سهولة الوصول. | ||
{| class="wikitable" | {| class="wikitable" | ||
سطر 620: | سطر 628: | ||
|} | |} | ||
== مصادر == | == مصادر == | ||
* [https:// | * [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 |