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

مراجعة 12:03، 18 مارس 2019

نظام مستجيب الإيماءات (Gesture Responder System)

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

نحتاج إلى نظام مستجيب الإيماءات للسماح للمكونات بالتعامل مع هذه اللمسات التفاعليّة دون أي معرفة إضافية عن المكون الأب أو الأطفال.

أفضل الممارسات

لتحسين التعامل مع تطبيقك، يجب أن يحتوي كل إجراءٍ على السمات التالية:

ردة فعل (Feedback) أو إبراز (highlighting): أظهر للمستخدم الجزء الذي يتعامل مع إيماءة اللمس، وما سيحدث عند إطلاق هذه الإيماءة.
القدرة على الإلغاء: عند القيام بإجراء ما، يجب أن يكون المستخدم قادرًا على إلغائه في منتصف حركة اللمس عن طريق سحب إصبعه بعيدًا.

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

مكون ‎‎`TouchableHighlight`‎‎ ومكونات ‎‎`Touchable*`‎‎ القابلة لللمس

يمكن أن يكون استخدام نظام المستجيب (responder system) معقدًا. لذا يحتوي إطار العمل على ميّزة ‎‎Touchable‎‎ تجريديّة (abstract) لما يُمكن لمسُه (tappable). يستخدم هذا نظامَ المستجيب ويسمح لك بإعداد تفاعلات اللمس تصريحيًّا (declaratively) بسهولة. استخدم TouchableHighlight في أي مكان قد تستخدم فيه زرًّا أو رابطًا على الويب.

دورة حياة المستجيب (Responder Lifecycle)

يمكن لِعرضٍ (view) أن يُصبِح مستجيبًا للّمس عبر استخدام التوابع المناسبة. هناك تابعان يُمكن بهما تحويل العرض إلى مستجيب:

‎‎View.props.onStartShouldSetResponder: (evt) => true,‎‎:هل تُريد تحويل هذا العرض إلى مستجيبٍ عند بدء اللمس؟

‎‎View.props.onMoveShouldSetResponder: (evt) => true,‎‎:يُستدعى لكل حركة لمسٍ في العرض عندما لا يكونُ مستجيبًا: هل يريد هذا العرض "المطالبة (claim)" بالاستجابة لللمس؟

إذا أعاد العرض القيمة ‎‎true‎‎ وحاول أن يُصبِح المستجيبَ للإيماءة، فسيحدث أحد الأمور التالية:

‎‎View.props.onResponderGrant: (evt) => {}‎‎: يستجيب العرضُ الآن لأحداث اللمس. هذا هو الوقت المناسب لإبراز وإظهار ما يحدث للمستخدم.
‎‎View.props.onResponderReject: (evt) => {}‎‎: يعمل عرضٌ آخرٌ بصفة المستجيب الآنَ ولن يُحرِّر (release) الإيماءة.

إذا كان العرض يستجيب، فيمكن استدعاء معالجات الأحداث التالية:

‎‎View.props.onResponderMove: (evt) => {}‎‎: يُحرِّك المستخدم إصبعه.
‎‎View.props.onResponderRelease: (evt) => {}‎‎: يُطلَق في نهاية اللمسة، أي الحدث "touchUp".
‎‎View.props.onResponderTerminationRequest: (evt) => true‎‎: هناك عرضٌ آخر يريد أن يصبح مجيبًا. هل يُحرِّر (release) هذا العرض المُستجيب؟ إعادة القيمة ‎‎true‎‎ يسمح بتحرير المستجيب.
‎‎View.props.onResponderTerminate: (evt) => {}‎‎: أُخِذَ المستجيب من العرض. قد يُؤخَذ من طرف عروضٍ أخرى بعد استدعاء ‎‎onResponderTerminationRequest‎‎، أو قد يُؤخَذ من طرف نظام التشغيل دون أي طلبٍ مُسبَق (يحدث هذا عبر مركز التحكم أو مركز الإشعارات على iOS).

evt حدثُ لمسةٍ اصطناعيّ (synthetic touch event) ذو الشكل التالي:

nativeEvent
- ‎‎changedTouches‎‎: مصفوفة جميع أحداث اللمس التي تغيّرت منذ آخر حدث.
- ‎‎identifier‎‎: مُعرِّف (ID) اللمسة.
- ‎‎locationX‎‎: موقع X للّمسة، نسبةً للعنصر.
- ‎‎locationY‎‎: موقع Y للّمسة، نسبةً للعنصر.
- ‎‎pageX‎‎: موضع X للّمسة، نسبةً للعنصر الجذر (root element).
- ‎‎pageY‎‎: موقع Y للّمسة، نسبةً للعنصر الجذر.
- ‎‎target‎‎: مُعرِّف العقدة (node id) للعنصر الذي يستقبل حدث اللمسة.
- ‎‎timestamp‎‎: مُعرِّف وقتٍ (time identifier) لللمسة، ما يُفيد في حساب السرعة.
- ‎‎touches‎‎: مصفوفة جميع اللمسات الحالية على الشاشة.

التقاط مُعالجات ShouldSet

يُستدعَى ‎‎onStartShouldSetResponder‎‎ و‎‎onMoveShouldSetResponder‎‎ بنمط فقاعي (bubbling pattern)، حيث تُستدعَى العقدة الأعمق أولاً. هذا يعني أن العنصر الأعمق سوف يصبح المُستجيب عندما تُعيد عروضٌ متعددة القيمةَ ‎‎true‎‎ لمعالجات ‎‎*ShouldSetResponder‎‎. هذا أمر مرغوب فيه في معظم الحالات، لأنه يتأكد من أن جميع عناصر التحكم والأزرار قابلة للاستخدام.

ومع ذلك، أحيانًا قد يرغب مُكوِّنٌ أبٌ في التّأكد من أنه سيصبح المستجيب. يمكن التعامل مع هذه الحالة عن طريق استخدام مرحلة الالتقاط (capture phase). قبل أن يصعد نظام المستجيب من المكوّن الأعمق إلى أعلى، سيمرّ بمرحلة التقاط، مُطلِقًا ‎‎on*ShouldSetResponderCapture‎‎. لذا، إذا أراد مكونٌ أبٌ منع الطفل من أن يصبح مستجيبًا عند بدء اللمس، فيجب أن يحتوي على معالج ‎‎onStartShouldSetResponderCapture‎‎ يقوم بإرجاع القيمة true.

‎‎View.props.onStartShouldSetResponderCapture: (evt) => true,‎‎
‎‎View.props.onMoveShouldSetResponderCapture: (evt) => true,‎‎

PanResponder

لتفسير الإيماءات على مستوًى أعلى (higher-level)، انظر PanResponder.

مصادر

صفحة Gesture Responder System في توثيق React Native الرسمي.

@@ سطر 15: / سطر 15: @@
 ===مكون ‎‎<code>TouchableHighlight</code>‎‎ ومكونات ‎‎<code>Touchable*</code>‎‎ القابلة لللمس===
-يمكن أن يكون استخدام نظام المستجيب (responder system) معقدًا. لذا يحتوي إطار العمل على ميّزة ‎‎<code>Touchable</code>‎‎ تجريديّة (abstract) لما يُمكن لمسُه (tappable). يستخدم هذا نظامَ المستجيب ويسمح لك بإعداد تفاعلات اللمس تصريحيًّا (declaratively) بسهولة. استخدم TouchableHighlight في أي مكان قد تستخدم فيه زرًّا أو رابطًا على الويب.
+يمكن أن يكون استخدام نظام المستجيب (responder system) معقدًا. لذا يحتوي إطار العمل على ميّزة ‎‎<code>Touchable</code>‎‎ تجريديّة (abstract) لما يُمكن لمسُه (tappable). يستخدم هذا نظامَ المستجيب ويسمح لك بإعداد تفاعلات اللمس تصريحيًّا (declaratively) بسهولة. استخدم <code>[[ReactNative/touchablehighlight|TouchableHighlight]]</code> في أي مكان قد تستخدم فيه زرًّا أو رابطًا على الويب.
 ==دورة حياة المستجيب (Responder Lifecycle)==
@@ سطر 32: / سطر 32: @@
 *‎‎<code>View.props.onResponderMove: (evt) => {}</code>‎‎: يُحرِّك المستخدم إصبعه.
 *‎‎<code>View.props.onResponderRelease: (evt) => {}</code>‎‎: يُطلَق في نهاية اللمسة، أي الحدث "touchUp".
-*‎‎<code>View.props.onResponderTerminationRequest: (evt) => true</code>‎‎: هناك عرضٌ آخر يريد أن يصبح مجيبًا. هل يُحرِّر هذا العرض المُستجيب؟ إعادة القيمة ‎‎<code>true</code>‎‎ يسمح بتحرير المستجيب.
+*‎‎<code>View.props.onResponderTerminationRequest: (evt) => true</code>‎‎: هناك عرضٌ آخر يريد أن يصبح مجيبًا. هل يُحرِّر (release) هذا العرض المُستجيب؟ إعادة القيمة ‎‎<code>true</code>‎‎ يسمح بتحرير المستجيب.
-*‎‎<code>View.props.onResponderTerminate: (evt) => {}</code>‎‎: أُخِذَ المستجيب من العرض. قد يُؤخَذ من طرف عروضٍ أخرى بعد استدعاء ‎‎<code>onResponderTerminationRequest</code>‎‎، أو قد يُؤخَذ من طرف نظام التشغيل دون أن أي طلبٍ مُسبَق (يحدث هذا عبر مركز التحكم أو مركز الإشعارات على iOS).
+*‎‎<code>View.props.onResponderTerminate: (evt) => {}</code>‎‎: أُخِذَ المستجيب من العرض. قد يُؤخَذ من طرف عروضٍ أخرى بعد استدعاء ‎‎<code>onResponderTerminationRequest</code>‎‎، أو قد يُؤخَذ من طرف نظام التشغيل دون أي طلبٍ مُسبَق (يحدث هذا عبر مركز التحكم أو مركز الإشعارات على iOS).
 <code>evt</code> حدثُ لمسةٍ اصطناعيّ (synthetic touch event) ذو الشكل التالي:
@@ سطر 40: / سطر 40: @@
 ** ‎‎<code>changedTouches</code>‎‎: مصفوفة جميع أحداث اللمس التي تغيّرت منذ آخر حدث.
 ** ‎‎<code>identifier</code>‎‎: مُعرِّف (ID) اللمسة.
-** ‎‎<code>locationX</code>‎‎: موقع X لللمسة، نسبةً للعنصر.
+** ‎‎<code>locationX</code>‎‎: موقع X للّمسة، نسبةً للعنصر.
-** ‎‎<code>locationY</code>‎‎: موقع Y لللمسة، نسبةً للعنصر.
+** ‎‎<code>locationY</code>‎‎: موقع Y للّمسة، نسبةً للعنصر.
-** ‎‎<code>pageX</code>‎‎: موضع X لللمسة، نسبةً للعنصر الجذر (root element).
+** ‎‎<code>pageX</code>‎‎: موضع X للّمسة، نسبةً للعنصر الجذر (root element).
-** ‎‎<code>pageY</code>‎‎: موقع Y لللمسة، نسبةً للعنصر الجذر.
+** ‎‎<code>pageY</code>‎‎: موقع Y للّمسة، نسبةً للعنصر الجذر.
 ** ‎‎<code>target</code>‎‎: مُعرِّف العقدة (node id) للعنصر الذي يستقبل حدث اللمسة.
 ** ‎‎<code>timestamp</code>‎‎: مُعرِّف وقتٍ (time identifier) لللمسة، ما يُفيد في حساب السرعة.