آموزشگاه برنامه نویسی تحلیل داده
آموزشگاه برنامه نویسی تحلیل داده

آموزش سیستم Gesture Responder در React Native

دوره های مرتبط با این مقاله

آموزش سیستم Gesture Responder در React Native

وظیفه ی این سیستم مدیریت چرخه حیات gesture های کاربر در application شماست. یک gesture touch کاربر تا زمانی که application معنایش را درک کند مراحل مختلف را می گذراند. مثلا application باید تصمیم بگیرد gesture یک scroll است، slide روی یک widget است یا tap است. حتی ممکن است درحین gesture، این برداشت تغییر کند. ممکن است چندین touch هم زمان باشند.

این سیستم باید به component ها اجازه دهد با تعاملات touch کاربر بدون هیچ دانش اضافه ای درمورد component parent یا child های خود، کار کنند.

بهترین رویکرد

به این منظور که application تان احساس فوق العاده ای به کاربر بدهد، هر action باید attribute های زیر را داشته باشد:

  • Feedback/highlighting – به کاربر نشان دهید چه المانی gesture شان را کنترل می کند، و وقتی gesture را رها کنند چه اتفاقی می افتد
  • Cancel-ability- وقتی کاربر کاری انجام می دهد باید بتواند آن را با رها کردن انگشتان وسط حرکت، متوقف کند.

این قابلیت ها کارکردن با application را راحت تر می کند چرا که به افراد امکان تجربه و تعامل با آن بدون دغدغه ی اشتباه کردن را می دهد.

TouchableHighlight و Touchable*

کار با system Responder می تواند دشوار باشد، به همین منظور ما پیاده سازی abstract از Touchable را برای المان هایی که باید قابل "tab" کردن باشند، در اختیار می گذاریم که از responder استفاده می کند و به شما امکان می دهد به راحتی این دسته از تعاملات کاربر را مدیریت کنید. از TouchableHighlight زمانی استفاده کنید که button یا لینکی به وب دارید.

چرخه حیات Responder

یک view می تواند با پیاده سازی متدهای مناسب تعاملی، touch responder شود. دو متد برای تعیین این وجود دارد:

  • View.props.onStartShouldSetResponder: (evt) = > true - آیا این view می خواهد در شروع یک touch، پاسخگو(responder) باشد؟
  • View.props.onMoveShouldSetResponder: (evt) = > true - به ازای هر touch روی یک view که responder نیست فراخوانی می شود: آیا این view می خواهد پاسخگو به touch باشد؟

اگر true، view برگرداند، و سعی کند responder شود، یکی از موارد زیر اتفاق می افتد:

  • View.props.onResponderGrant: (evt) = > {} – view به viewهای touch پاسخ نمی دهد. این جا باید به کاربر نشان دهیم چه اتفاقی دارد می افتد.
  • View.props.onResponderReject: (evt) = > {}– در این لحظه responder المان دیگری است و کنترل را به این view نخواهد داد.

اگر view responding باشد، متدهای handler زیر می تواند فراخوانی شود:

  • View.props.onResponderReject: (evt) = > {} – کاربر انگشتش را جابه جا می کند.
  • iew.props.onResponderRelease: (evt) = > {} – در انتهای touch اتفاق می افتد، یعنی "touchUp"
  • View.props.onResponderTerminationRequest: (evt) = > true – المان دیگری می خواهد responder شود. آیا این view باید اجازه دهد؟ برگرداندن true این اجازه را می دهد.
  • View.props.onResponderTerminate: (evt) = > {} – پاسخگویی به view دیگری محول شده. ممکن است پس از فراخوانی onResponderTerminationRequest به view دیگری داده شده یا سیستم عامل آن را گرفته باشد (برای control center/ notification center درiOS این اتفاق می افتد).

evt یک event touch ترکیبی است که اشکال زیر را دارد:

  • nativeEvent
    • changeTouches - آرایه ای از تمام event touch هایی که از آخرین event تغییر کرده اند
    • identifier - شناسه touch
    • locationX - موقعیت X هر touch نسبت به المان
    • locationY - موقعیت Y هر touch نسبت به المان
    • pageX - موقعیت X هر touch نسبت به root element
    • pageY - موقعیت Y هر touch نسبت به المان root element
    • target - شناسه node المانی که event را دریافت می کند
    • time stamp - شناسه زمانی برای touch، مناسب برای محاسبه سرعت
    • touches - آرایه از تمام touch های فعلی روی صفحه نمایش

Capture ShouldSet Handlers

متدهای onStartShouldSetResponder و onMoveShouldSetResponder با یک الگوی حبابی، فراخوانی می شود، به گونه ای که عمیق ترین node اول فراخوانی می شود. این به این معنی است که، هنگامی چند view برای *ShouldSetResponder مقدار true برمی گردانند، عمیقترین component، responder خواهد بود. این در بیشتر مواقع همان چیزی است که می خواهیم، چرا که همه ی کنترل ها و دکمه ها قابل استفاده هستند.

با این حال، گاهی یک parent element میخواهد حتما responder شود. این کار می تواند با استفاده از مرحله ی capture انجام شود. قبل از اینکه responder system از عمیق ترین component بالا بیاید، یک مرحله capture انجام می دهد، و رویداد on*ShouldSetResponderCapture را فراخوانی می کند. اگر view parent بخواهد جلوی responder شدن child را بگیرد، باید یک handler onStartShouldSetResponderCapture داشته باشد که true برگرداند.


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

PanResponder

برای تفسیر حرکات پیچیده تر، این بخش را ببینید.

  • 371
  •    0
  • تاریخ ارسال :   1398/06/04

دانشجویان گرامی اگر این مطلب برای شما مفید بود لطفا ما را در GooglePlus محبوب کنید
رمز عبور: tahlildadeh.com یا www.tahlildadeh.com
ارسال دیدگاه نظرات کاربران
شماره موبایل دیدگاه
عنوان پست الکترونیک

ارسال

آموزشگاه برنامه نویسی تحلیل داده
آموزشگاه برنامه نویسی تحلیل داده

تمامی حقوق این سایت متعلق به آموزشگاه تحلیل داده می باشد .