نظام مستجيب الإيماءات في React Native
نظام مستجيب الإيماءات (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.