Edit

Дохио үйлдэлд хариу өгөх систем

Дохио үйлдэлд хариу өгөх систем нь таны аппын бүх дохио үйлдлийг зохицуулдаг. Дэлгэцэнд нэг хүрэхэд л хэрэглэгч ямар үйлдэл хийх гэж буй тухай апп таньж, хэд хэдэн дамжлага явагдаж хариу өгдөг. Жишээ нь хуруугаа дээш доош гүйлгэж буй эсэх эсвэл хөндлөн гүйлгэх, товшиж байгаа эсэхийг апп таних хэрэгтэй. Хүрэх үйлдэл бүрт энэхүү таних үйлдэл нь өөр өөр байдаг. Хэд хэдэн хуруугаар зэрэг дарж байж ч болох.

Эдгээр дэлгэцэнд хүрч буй үйлдлийг эцэг эсвэл хүүхэд компонент нь юу болохоос үл хамааран зохицуулахад дохио үйлдэлд хариу өгөх систем тусалдаг.

Шилдэг туршлага

Аппаа гайхалтай байлгахын тулд үйлдэл бүрт доорх аттрибут байх хэрэгтэй:

-Feedback/highlighting- хэрэглэгчийн хүрсэн үйлдлийг юу хүлээж авч байгааг харуулах ба тухайн үйлдлээ хийвэл юу болохыг таниулдаг

• Cancel-ability- ямарваа нэг үйлдэл хийж байх үедээ хэрэглэгч хуруугаа авч, хөнгөн чирэх үед үйлдэл цуцлагддаг

Эдгээр нь хэрэглэгчийг апп ашиглахад илүү тохиромжтой болгодог. Яагаад гэвэл хүмүүс алдаа гаргачих нь гэж санаа зоволгүйгээр өөрөө туршиж, оролдож үзэх боломжийг олгодог.

TouchableHighlight and Touchable*

Хариу өгөх систем нь зарим үед ашиглахад төвөгтэй байх нь бий. Тиймээс товшиж болох болох зүйлс бүрт зориулсан Touchable гэх зүйлийг гаргасан. Энэ хариу өгөх системийг ашигладаг ба товших үйлдлийг хялбар таньж чаддаг. TouchableHighlight-ыг вэб дээр товч эсвэл холбоос гэх мэт зүйлс дээр ашиглах боломжтой.

Хариу өгөгчийн хугацаа

Зөв хариу үйлдэл үзүүлэн таньж чадвал харагдац нь тухайн хүрсэн үйлдэлд хариу илэрхийлнэ. Харагдаж хариу өгөх эсэхийг мэдэх хоёр арга байдаг:

• View.props.onStartShouldSetResponder: (evt) => true, - Дэлгэцэнд хүрэх үед энэхүү харагдац нь хариу өгөх үү?
• View.props.onMoveShouldSetResponder: (evt) => true, - Хариу өгөхгүй бол харагдац бүр дээр дуудах: энэхүү харагдац нь хариу өгөхийг шаардах уу?

Хэрэв харагдац нь үнэн гээд хариу өгөхөөр оролдвол доорхийн аль нэг нь биелнэ:

• View.props.onResponderGrant: (evt) => {} - Харагдац нь дэлгэцэнд хүрэх үйлдэлд одоо хариу өгч байна. Одоо тодруулж, хэрэглэгчид юу болж байгааг харуулна
• View.props.onResponderReject: (evt) => {} - Өөр зүйл хариу өгч байгаа бөгөөд чөлөөлөхгүй байна

Хэрэв харагдац нь хариу өгч байгаа бол доорхыг дуудна:

• View.props.onResponderMove: (evt) => {} - Хэрэглэгч хуруугаа хөдөлгөж байна
• View.props.onResponderRelease: (evt) => {} - Хүрэх үйлдэл төгсөх үед ажиллаж эхэлсэн "touchUp"
• View.props.onResponderTerminationRequest: (evt) => true - Өөр зүйл хариу өгөх гээд байна. Энэхүү харагдац нь хариу өгөхийг зөвшөөрөх үү? Үнэн гэвэл зөвшөөрнө
• View.props.onResponderTerminate: (evt) => {} - Харагдац хариу үйлдэл хийж байна. onResponderTerminationRequest-ыг дуудсаны дараа өөр харагдац үйлдэл хийж байх боломжтой эсвэл OS нь зөвшөөрөлгүйгээр үйлдэл хийж байна (iOS дээр control center/ notification)

evt нь доорх хэлбэр бүхий дэлгэцэнд хүрэх хиймэл үйлдэл юм:

• nativeEvent
  • changedTouches - Сүүлийн эвентээс хойш өөрчлөгдсөн бүх хүрэх эвентийн массив
  • identifier - Хүрэх үйлдлийн ID
  • locationX - Элементтэй хамаарал бүхий хүрэх үйлдлийн X байрлал
  • locationY - Элементтэй хамаарал бүхий хүрэх үйлдлийн Y байрлал
  • pageX - Рүүт элементтэй хамаарал бүхий хүрэх үйлдлийн X байрлал
  • pageY - Рүүт элементтэй хамаарал бүхий хүрэх үйлдлийн Y байрлалt
  • target - Хүрэх эвентийг хүлээн авч буй элементийн node id
  • timestamp - Хүрэх үйлдлийн цагийг танигч, давтамжийг танихад тустай
  • touches - Дэлгэц одоо хүрч буй бүх үйлдлийн массив

Capture ShouldSet Handlers

onStartShouldSetResponder болон onMoveShouldSetResponder нь хамгийн цаадах node-ийг хамгийн түрүүнд дууддаг. Энэ нь *ShouldSetResponder дээр олон харагдац байх үед хамгийн цаадах компонент нь хариу өгнө гэсэн үг. Бүх удирдагч, товчийг ашигладаг тул ихэнхдээ хэрэгтэй байдаг.

Гэхдээ заримдаа эцэг нь өөрөө хариу өгөхийг хүсэх нь бий. Хариу өгөх систем нь хамгийн цаадах компонентыг дуудахаас өмнө on*ShouldSetResponderCapture-ыг ажиллуулдаг. Тэгэхээр дэлгэцэнд хүрэх үйлдэл хийгдэх үед эцэг харагдац нь хүүхдээ хариу өгөхийг хүсэхгүй байгаа бол onStartShouldSetResponderCapture нь үнэн байх хэрэгтэй болно.

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

PanResponder

Дохио үйлдэл ахисан түвшинд таньдаг тухай уншихыг хүсвэл PanResponder-ыг харна уу.