Upgrade to Pro — share decks privately, control downloads, hide ads and more …
Sign up for free

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

Avatar for Yosuke Saito Yosuke Saito
February 08, 2018
Programming
1.8k
3

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

LT on React Native Meetup #7

Avatar for Yosuke Saito

Yosuke Saito

February 08, 2018

More Decks by Yosuke Saito

See All by Yosuke Saito
DEIM2022 補助行動データと明示的な選好データを活用した求人推薦手法
Avatar for Yosuke Saito saitoxu
0
160
論文紹介: Learning Recommender Systems with Implicit Feedback via Soft Target Enhancement (SIGIR’21)
Avatar for Yosuke Saito saitoxu
0
330

Other Decks in Programming

See All in Programming
re:Inventに行く前に知っておきたい現地参加のノウハウ
Avatar for nokomoro3 nokomoro3
0
230
市販E-Readerを乗っ取れ 〜Embedded Swiftで電子ペーパーガジェットを制御する〜
Avatar for Trickart trickart
0
220
Java 27新機能 / Java 27 new features
Avatar for Naoki Kishida kishida
2
180
モジュールの視点からSwiftを読み解く #iosdc
Avatar for Shigure Shimotori s_shimotori
0
210
JAWS-UG 東京支部が始める、JAWS-UG支部コラボ / JAWS-UG lunchtime LT Collaboration
Avatar for y-ohgi y0hgi
0
160
Webの地図
Avatar for Yosuke Furukawa yosuke_furukawa
PRO
6
4.9k
Streamlitで実現する自然言語データアプリ開発
Avatar for Ayumu Yamaguchi ayumu_yamaguchi
1
320
MVNOの申込からeSIM開通までをiOSアプリでつなぐ- 本人確認・MNP・通信事業者基盤をまたぐ実装
Avatar for Sato Takeshi satotakeshi
0
500
ゲームコントローラやキーボードのファームウェアをSwiftで書く
Avatar for Kishikawa Katsumi kishikawakatsumi
1
270
AGENTS.md Is Not Enough: Build Skills, Don't Download Them
Avatar for Alex T lx_t
0
130
Heart of Swift Concurrency
Avatar for Yuta Koshizawa koher
0
1.1k
スマートフォンでモールス信号を送受信する 〜スマートフォンのLEDとカメラで作る光通信の設計と実装〜
Avatar for Atsuki Seo atsuki_seo
0
200

Featured

See All Featured
The Web Performance Landscape in 2024 [PerfNow 2024]
Avatar for Tammy Everts tammyeverts
12
1.3k
CSS Pre-Processors: Stylus, Less & Sass
Avatar for Bermon Painter bermonpainter
360
31k
We Analyzed 250 Million AI Search Results: Here's What I Found
Avatar for Josh Blyskal joshbly
1
2k
Pawsitive SEO: Lessons from My Dog (and Many Mistakes) on Thriving as a Consultant in the Age of AI
Avatar for David Carrasco davidcarrasco
0
250
Prompt Engineering for Job Search
Avatar for Mfonobong Umondia mfonobong
0
460
GitHub's CSS Performance
Avatar for Jon Rohan jonrohan
1033
470k
Keith and Marios Guide to Fast Websites
Avatar for Keith Pitt keithpitt
413
23k
Reality Check: Gamification 10 Years Later
Avatar for Sebastian Deterding codingconduct
0
2.3k
How to audit for AI Accessibility on your Front & Back End
Avatar for davetheseo davetheseo
0
550
Ecommerce SEO: The Keys for Success Now & Beyond - #SERPConf2024
Avatar for Aleyda Solis aleyda
1
2.2k
Avoiding the “Bad Training, Faster” Trap in the Age of AI
Avatar for Mike Taylor tmiket
0
250
[RailsConf 2023] Rails as a piece of cake
Avatar for Vladimir Dementyev palkan
59
7k

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!!