عرض مصدر ReactNative/touchablewithoutfeedback

<noinclude>{{DISPLAYTITLE:المكون TouchableWithoutFeedback في React Native}}</noinclude>
<blockquote>'''ملاحظة''': إذا كنت تريد طريقةً أكثر شمولية للتعامل مع عناصر الإدخال باللمس اطّلع على واجهة [[ReactNative/pressable|<code>Pressable</code>]] البرمجية.</blockquote>لا تستخدم هذا المكون إلا لِسَببٍ وجيه. يجب على جميع العناصر التي تستجيب للضغط أن تُظهِر علامةً مرئيةً  تُعلم المستخدم بأنّها قد لُمِسَت، وهذا المكون لا يظهر أي شيء من هذا القبيل، بل يظهر وكأنّه لم يُضغَط عليه.

يدعم <code>TouchableWithoutFeedback</code> مكوّنًا ابنًا واحدًا فقط. إذا كنت تريد العديد من المكونات الأبناء، فقم بتغليفها داخل مُكوّنِ‎‎<code>View</code>‎‎. والأهم من ذلك، اعلم أنّ المكوِّن <code>TouchableWithoutFeedback</code> يعمل عن طريق استنساخ مكوّنه الابن وتطبيق خاصيَّات المستجيب (responder) عليه. ولذلك من الضروري أن تُمرِّرَ أي مكوّنات وسيطة (intermediary components) هذه الخاصيات إلى مكوّن React Native الضِّمنيّ (underlying component).
== مثال ==
إليك مثال بسيط لكيفية استخدام المكون:<syntaxhighlight lang="javascript">
function MyComponent(props) {
  return (
    <View {...props} style={{ flex: 1, backgroundColor: '#fff' }}>
      <Text>My Component</Text>
    </View>
  );
}

<TouchableWithoutFeedback onPress={() => alert('Pressed!')}>
  <MyComponent />
</TouchableWithoutFeedback>;
</syntaxhighlight>انظر المثال الشامل التالي ([https://snack.expo.dev/@hsoubwiki/touchablewithoutfeedback تجربة حية]):<syntaxhighlight lang="javascript">
import React, { useState } from "react";
import { StyleSheet, TouchableWithoutFeedback, Text, View } from "react-native";

const TouchableWithoutFeedbackExample = () => {
  const [count, setCount] = useState(0);

  const onPress = () => {
    setCount(count + 1);
  };

  return (
    <View style={styles.container}>
      <View style={styles.countContainer}>
        <Text style={styles.countText}>Count: {count}</Text>
      </View>
      <TouchableWithoutFeedback onPress={onPress}>
        <View style={styles.button}>
          <Text>Touch Here</Text>
        </View>
      </TouchableWithoutFeedback>
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: "center",
    paddingHorizontal: 10
  },
  button: {
    alignItems: "center",
    backgroundColor: "#DDDDDD",
    padding: 10
  },
  countContainer: {
    alignItems: "center",
    padding: 10
  },
  countText: {
    color: "#FF00FF"
  }
});

export default TouchableWithoutFeedbackExample;
</syntaxhighlight>

==الخاصيات==
===‎‎<code>accessibilityIgnoresInvertColors</code>‎‎===

{| class="wikitable"
!النوع
!مطلوب
|-
|قيمة منطقيّة
|لا
|}
===‎‎<code>accessible</code>‎‎===
عندما تكون ذات القيمة ‎‎<code>true</code>‎‎، فذلك يشير إلى أن العرض عنصرُ إمكانية وصول (accessibility element). افتراضيًّا، يمكن الوصول إلى جميع العناصر القابلة للّمس.
{| class="wikitable"
!النوع
!مطلوب
|-
|قيمة منطقيّة
|لا
|}
===‎‎<code>accessibilityLabel</code>‎‎===
يستبدِل النص الذي يقرأه قارئ الشاشة عندما يتفاعل المستخدم مع العنصر. افتراضيًا، يُنشأ العنوان أو التسمية (label) عن طريق العبور عبر جميع المكوّنات الأبناء وتجميع كافة العقد النصية <code>[[ReactNative/text|Text]]</code> مفصولةً بمسافة.

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

يُمكن للخاصيّة ‎‎<code>accessibilityRole</code>‎‎ أن تحمل أحد القيم التالية:

* ‎‎<code>'none'</code>‎‎ - تُستخدَم عندما لا يكون للعنصر أي دور.
* ‎‎<code>'button'</code>‎‎ - تستخدم عندما تجب معاملة العنصر كزر.
* ‎‎<code>'link'</code>‎‎ - تستخدم عندما تجب معاملة العنصر كرابط.
* ‎‎<code>'search'</code>‎‎  - تستخدم عندما تجب معاملة عنصر حقل النص كعنصر بحث كذلك.
* ‎‎<code>'image'</code>‎‎  -  تستخدم عندما تجب معاملة العنصر كصورة. يمكن دمجها مع زرٍ أو رابطٍ مثلا.
* ‎‎<code>'keyboardkey'</code>‎‎  -  تستخدم عندما يتصرَّف العنصرُ كمفتاح لوحة مفاتيح.
* ‎‎<code>'text'</code>‎‎  -  تستخدم عندما تجب معاملة العنصر كنص ثابت لا يمكن تغييره.
* ‎‎<code>'adjustable'</code>‎‎  - تستخدم عندما يمكن "تعديل" العنصر (مثل شريط تمريرٍ [slider]).
* ‎‎<code>'imagebutton'</code>‎‎  - تستخدم عندما تجب معاملة العنصر كزرٍ مع كونِه صورة في نفس الوقت.
* ‎‎<code>'header'</code>‎‎  - تستخدم عندما يتصرف عنصرٌ كترويسةٍ (header) لقسمِ محتوى (كعنوان شريط التنقل).
* ‎‎<code>'summary'</code>‎‎  - تستخدم عندما يمكن استخدام عنصر ما لتقديم ملخص سريع للظروف الحالية في التطبيق عند بدء تشغيل التطبيق لأول مرة.
* ‎‎<code>'alert'</code>‎‎  - تستخدم عندما يحتوي عنصر على نص مهم لعرضه للمستخدم.
* ‎‎<code>'checkbox'</code>‎‎  - تستخدم عندما يمثل عنصر مربعًا يمكن تحديده أو إلغاء تحديده أو في حالة تحديد مختلطة.
* ‎‎<code>'combobox'</code>‎‎  - تستخدم عندما يمثل عنصر مربع تحرير وسرد (combo box)، مما يسمح للمستخدم بالاختيار من بين عدة خيارات.
* ‎‎<code>'menu'</code>‎‎  - تستخدم عندما يكون المكون قائمةً من الخيارات.
* ‎‎<code>'menubar'</code>‎‎  - تستخدم عندما يكون المكون عبارة عن حاوية متعددة القوائم.
* ‎‎<code>'menuitem'</code>‎‎  -  تستخدم لتمثيل عنصرٍ داخل قائمة.
* ‎‎<code>'progressbar'</code>‎‎  -  تستخدم لتمثيل مكون يشير إلى تقدم المهمة (شريط تقدم).
* ‎‎<code>'radio'</code>‎‎  - تستخدم لتمثيل زر اختيار.
* ‎‎<code>'radiogroup'</code>‎‎  - تستخدم لتمثيل مجموعة من أزرار الاختيار.
* ‎‎<code>'scrollbar'</code>‎‎  - تستخدم لتمثيل شريط تمرير.
* ‎‎<code>'spinbutton'</code>‎‎  - تستخدم لتمثيل زر يفتح قائمة من الخيارات.
* ‎‎<code>'switch'</code>‎‎  - تستخدم لتمثيل مُحوِّلة يمكن تشغيلها وإيقاف تشغيلها.
* ‎‎<code>'tab'</code>‎‎  - تستخدم لتمثيل علامة تبويب.
* ‎‎<code>'tablist'</code>‎‎  - تستخدم لتمثيل قائمة من علامات التبويب.
* ‎‎<code>'timer'</code>‎‎  - تستخدم لتمثيل مؤقت.
* ‎‎<code>'toolbar'</code>‎‎  - تستخدم لتمثيل شريط أدوات (حاوية من أزرارٍ ومكوّنات إجراءات).

{| class="wikitable"
!النوع
!مطلوب
|-
|سلسلة نصيّة
|لا
|}
===‎‎<code>accessibilityState</code>‎‎===
تصف الحالة الحالية لمكوّنٍ ما لمستخدمِ تقنيةٍ مساعدة.

انظر [[ReactNative/accessibility|دليل سهولة الوصول]] لمزيد من المعلومات.

{| class="wikitable"
!النوع
!مطلوب
|-
|‎‎كائن: {disabled: bool, selected: bool, checked: bool or 'mixed', busy: bool, expanded: bool}‎‎
|لا
|}
===‎‎<code>accessibilityActions</code>‎‎===
تسمح إجراءات سهولة الوصول (Accessibility actions) لتقنيّة مساعدة باستدعاء إجراءات مكونٍ برمجيًا. يجب أن تحتوي الخاصية <code>accessibilityActions</code> على قائمة كائنات إجراءات (action objects). يجب أن يحتوي كل كائن إجراء على اسم الحقل وعلى تسمية أو عنوان (label).

انظر [[ReactNative/accessibility|دليل سهولة الوصول]] لمزيد من المعلومات.
{| class="wikitable"
!النوع
!مطلوب
|-
|مصفوفة
|لا
|}

===‎‎<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"
!النوع
!مطلوب
|-
|دالة
|لا
|}

=== <code>accessibilityValue</code> ===
تمثل القيمة الحالية للمكون ويمكن أن تكون وصفًا نصيًا لقيمة المكون أو معلومات حول المجال مثل القيمة الدنيا والقيمة الحالية والقيمة العظمى للمكونات ذات المجال مثل المنزلقات sliders وأشرطة التقدم.

انظر [[ReactNative/accessibility|دليل سهولة الوصول]] لمزيد من المعلومات.
{| class="wikitable"
!النوع
!مطلوب
|-
|كائن {min: number, max: number, now: number, text: string}
|لا
|}

===‎‎<code>delayLongPress</code>‎‎===
التأخير بالمللي ثانية، منذ اللحظة التي تستدعى فيها دالّةُ ‎‎<code>onPressIn</code>‎‎، قبل استدعاء ‎‎<code>onLongPress</code>‎‎.
{| class="wikitable"
!النوع
!مطلوب
|-
|عدد
|لا
|}
===‎‎<code>delayPressIn</code>‎‎===
التأخير بالمللي ثانية، من بداية اللمس، قبل أن تُستدعى الدالة ‎‎<code>onPressIn</code>‎‎.
{| class="wikitable"
!النوع
!مطلوب
|-
|عدد
|لا
|}
===‎‎<code>delayPressOut</code>‎‎===
التأخير بالمللي ثانية، من تحرير اللمس، قبل استدعاء ‎‎<code>onPressOut</code>‎‎.
{| class="wikitable"
!النوع
!مطلوب
|-
|عدد
|لا
|}

===‎‎<code>disabled</code>‎‎===
عندما تكون ذات القيمة ‎‎<code>true</code>‎‎، تُعطَّل جميع التفاعلات مع هذا المكون.
{| class="wikitable"
!النوع
!مطلوب
|-
|قيمة منطقيّة
|لا
|}

===‎‎<code>hitSlop</code>‎‎===
تُحدد هذه الخاصيّة المدى الذي يمكن أن يبدأ فيه لمس الزّر. يُضاف هذا إلى الخاصيّة ‎‎<code>pressRetentionOffset</code>‎‎ عند نقل اللمسة بعيدًا عن الزر. 

'''ملاحظة:''' لا تمتد منطقة اللمس أبدًا بعد حدود العرض الأب، ودائمًا ما يأخذ مؤشر Z-index الخاص بالعروض الأشقّاء (المجاورة) الأولويّةَ إذا وقعت اللمسة على عرضين متداخلين.
{| class="wikitable"
!النوع
!مطلوب
|-
|كائن [[ReactNative/rect|Rect]] أو عدد
|لا
|}

===‎‎<code>onBlur</code>‎‎===
تُستدعى عندما يفقد العنصر التركيز.
{| class="wikitable"
!النوع
!مطلوب
|-
|دالة
|لا
|}

===‎‎<code>onFocus</code>‎‎===
تُستدعى عندما يستقبل العنصر التركيز.
{| class="wikitable"
!النوع
!مطلوب
|-
|دالة
|لا
|}

===‎‎<code>onLayout</code>‎‎===
تُستدعى عند التركيب وتغيُّر التخطيط.
{| class="wikitable"
!النوع
!مطلوب
|-
|دالة
‎({ nativeEvent: [[ReactNative/layoutevent|LayoutEvent]] }) => void
|لا
|}
===‎‎<code>onLongPress</code>‎‎===
دالة تُستدعى إن تجاوز الوقت قيمة 370 ميللي ثانية بعد بدء <code>onPressIn</code> ويمكن تغيير تلك القيمة عبر <code>delayLongPress</code>.
{| class="wikitable"
!النوع
!مطلوب
|-
|دالة
|لا
|}
===‎‎<code>onPress</code>‎‎===
تُستدعى عندما يتم تحرير اللمس، ولكنها لا تُستدعى إذا أُلغيَ اللمس (بواسطة تمريرٍ يأخذ قفل المستجيب (responder lock) مثلًا). أول وسيط يمرر لهذه الدالة هو حدث من نمط <code>PressEvent</code>.
{| class="wikitable"
!النوع
!مطلوب
|-
|دالة
|لا
|}
===‎‎<code>onPressIn</code>‎‎===
تُستدعى بمجرد الضغط على العنصر القابل للّمس وتُستدعى حتى قبل دالة ‎‎<code>onPress</code>‎‎. قد يكون هذا مفيدًا عند إجراء طلبات الشبكة. أول وسيط يمرر لهذه الدالة هو حدث من نمط <code>PressEvent</code>.
{| class="wikitable"
!النوع
!مطلوب
|-
|دالة
|لا
|}
===‎‎<code>onPressOut</code>‎‎===
تُستدعى بمجرد تحرير اللمس حتى قبل دالة ‎‎<code>onPress</code>‎‎. أول وسيط يمرر لهذه الدالة هو حدث من نمط <code>PressEvent</code>.
{| class="wikitable"
!النوع
!مطلوب
|-
|دالة
|لا
|}
===‎‎<code>pressRetentionOffset</code>‎‎===
عند تعطيل عرض التمرير (scroll view)، تُحدد هذه الخاصيّة مدى المسافة التي يمكن أن تتحرك بها اللمسة بعيدًا عن الزر قبل إلغاء تنشيطه. بمجرد إلغاء تنشيط الزر، حاول تحريكه للخلف وسترى أن الزر قد نُشِّط مرة أخرى! حركه للخلف وللأمام عدة مرات أثناء تعطيل عرض التمرير. تأكد من تمرير قيمة ثابتةٍ لتقليل تخصيصات الذاكرة.
{| class="wikitable"
!النوع
!مطلوب
|-
|كائن [[ReactNative/rect|Rect]] أو عدد
|لا
|}
===‎‎<code>nativeID</code>‎‎===
{| class="wikitable"
!النوع
!مطلوب
|-
|سلسلة نصيّة
|لا
|}
===‎‎<code>testID</code>‎‎===
تُستخدم لتحديد موقع هذا العرض في الاختبارات الشاملة (end-to-end tests).
{| class="wikitable"
!النوع
!مطلوب
|-
|سلسلة نصيّة
|لا
|}

===‎‎<code>touchSoundDisabled</code>‎‎===
إذا كان ذات القيمة ‎‎<code>true</code>‎‎، فلن يُشغَّل صوت النظام عند اللمس.
{| class="wikitable"
!النوع
!مطلوب
!المنصة
|-
|قيمة منطقيّة
|لا
|Android
|}

== مصادر ==
* [https://facebook.github.io/react-native/docs/touchablewithoutfeedback صفحة TouchableWithoutFeedback في توثيق React Native الرسمي.]
[[تصنيف:ReactNative]]
[[تصنيف:React Native Component]]