React Nativeで作る色々なジェスチャー

817bcbf18aa20a61bb0cfe72f524e1c2?s=47 Yosuke Saito
February 08, 2018

React Nativeで作る色々なジェスチャー

LT on React Native Meetup #7

817bcbf18aa20a61bb0cfe72f524e1c2?s=128

Yosuke Saito

February 08, 2018
Tweet

Transcript

  1. @saitoxu React NativeͰ࡞Δ ৭ʑͳδΣενϟʔ

  2. ࣗݾ঺հ • @saitoxu ʢ͍͞ͱ͏ʣ • Co-Founder&CTO@Carat Inc. • 2ظ໨ʹೖͬͨ͹͔ΓͷελʔτΞο ϓ

    • React, React Native, Rails, Python… • ωΠςΟϒ͸झຯͰ͔͠ॻ͍ͨ͜ͱͳ ͍Ϛϯ
  3. αʔϏε঺հ • ٻ৬ɾస৬ΞϓϦGLITʢάϦοτʣ • TinderϥΠΫͳUI͕ಛ௃ • https://glit.io • React Native੡

    • ͕ͩݱࡏiOS൛ͷΈ.. • JSΤϯδχΞઈࢍืूͯ͠·͢..ʂ
  4. ΞϓϦͰΑ͘࢖͏ δΣενϟʔ

  5. 1. λοϓ 2. ௕ԡ͠ 3. μϒϧλοϓ 4. υϥοά 5. εϫΠϓ

    6. ϐϯνΠϯˍϐϯνΞ΢τ
  6. React NativeͰ Ͳ͏࡞Δ͔ʁ

  7. 1. λοϓ • Touchable*ίϯϙʔωϯτΛ࢖༻

  8. 2. ௕ԡ͠ • Touchable*ίϯϙʔωϯτͷonLongPressͱ͍͏props Λ࢖༻

  9. 3. μϒϧλοϓ • Touchable*ͷonPressൃՐͷִ͕ؒx msҎ಺ͩͬͨΒμϒϧλοϓͱΈͳ͢

  10. 3. μϒϧλοϓ • Touchable*ͷonPressൃՐͷִ͕ؒx msҎ಺ͩͬͨΒμϒϧλοϓͱΈͳ͢

  11. 4. υϥοά • δΣενϟʔΛѻ͏PanResponderΛ࢖༻ • evt΍gestureStateΛհͯ͠Componentͷ࠲ඪ΍ҠಈྔͳͲ͕औಘͰ͖Δ

  12. None
  13. pan.x pan.y (1) ॳظԽ

  14. offset x + 0 offset y + 0 (2) υϥοά։࢝࣌

  15. offset x offset y dx dy (3) υϥοάத

  16. pan.x pan.y (4) ཭ͨ͠ޙ

  17. 5. εϫΠϓ • υϥοάͱ͋·ΓมΘΒͳ͍ • ᮢ஋ͷઃఆͱΞχϝʔγϣϯ͕ඞཁ υϥοάͯ͠ᮢ஋Λ௒͑Δ ΞχϝʔγϣϯͰඈΜͰ͘

  18. dx threshold decay

  19. 6. ϐϯνΠϯˍϐϯνΞ΢τ • gestureState.numberActiveTouches: ༗ޮͳ λονͷ਺ • evt.nativeEvent.touches: λονΠϕϯτͷΦ ϒδΣΫτɻλον͞Εͨ৔ॴͷ࠲ඪͳͲ͕ೖͬ

    ͍ͯΔ
  20. distance

  21. distance

  22. ͓ΘΓʹ • جຊతͳδΣενϟʔͷ࣮૷Λ঺հ͠·ͨ͠ • ͜ΕΒͷδΣενϟʔ΍AnimationͳͲΛ͞Β ʹ૊Έ߹ΘͤɺωΠςΟϒͬΆ͍͍͍ײ͡ͷ UI/UXΛ࡞͍͖ͬͯ·͠ΐ͏

  23. Thanks!!