المكون View في React Native

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

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

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

مثال

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

• مثال مكون دالة (Function 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;

• مثال مكون صنف (Class Component)

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

مصادر

• صفحة View في توثيق React Native الرسمي.