Upgrade to Pro — share decks privately, control downloads, hide ads and more …

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

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

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

LT on React Native Meetup #7

Avatar for Yosuke Saito

Yosuke Saito

February 08, 2018
Tweet

More Decks by Yosuke Saito

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

Other Decks in Programming

See All in Programming
CSC305 Lecture 04
Avatar for Javier Gonzalez-Sanchez javiergs
PRO
0
270
What's new in Spring Modulith?
Avatar for Oliver Drotbohm olivergierke
1
160
チームの境界をブチ抜いていけ
Avatar for tokai235 tokai235
0
200
理論と実務のギャップを超える
Avatar for kmuto eycjur
0
170
Catch Up: Go Style Guide Update
Avatar for ANDPAD inc andpad
0
230
Leading Effective Engineering Teams in the AI Era
Avatar for Addy Osmani addyosmani
7
510
Goで実践するドメイン駆動開発 AIと歩み始めた新規プロダクト開発の現在地
Avatar for imkaoru imkaoru
4
870
CSC509 Lecture 05
Avatar for Javier Gonzalez-Sanchez javiergs
PRO
0
300
Go Conference 2025: Goで体感するMultipath TCP ― Go 1.24 時代の MPTCP Listener を理解する
Avatar for Takeru Hayasaka takehaya
9
1.7k
他言語経験者が Golangci-lint を最初のコーディングメンターにした話 / How Golangci-lint Became My First Coding Mentor: A Story from a Polyglot Programmer
Avatar for uMa uma31
0
310
AI Coding Meetup #3 - 導入セッション / ai-coding-meetup-3
Avatar for Masayuki Izumi izumin5210
0
3.4k
When Dependencies Fail: Building Antifragile Applications in a Fragile World
Avatar for Selçuk Usta selcukusta
0
110

Featured

See All Featured
Context Engineering - Making Every Token Count
Avatar for Addy Osmani addyosmani
7
270
"I'm Feeling Lucky" - Building Great Search Experiences for Today's Users (#IAC19)
Avatar for Dan Newman danielanewman
230
22k
Measuring & Analyzing Core Web Vitals
Avatar for Philip Tellis bluesmoon
9
620
Save Time (by Creating Custom Rails Generators)
Avatar for Garrett Dimon garrettdimon
PRO
32
1.6k
The Success of Rails: Ensuring Growth for the Next 100 Years
Avatar for Eileen M. Uchitelle eileencodes
46
7.7k
It's Worth the Effort
Avatar for 3n 3n
187
28k
GraphQLの誤解/rethinking-graphql
Avatar for sonatard sonatard
73
11k
Designing Dashboards & Data Visualisations in Web Apps
Avatar for Des Traynor destraynor
231
53k
Automating Front-end Workflow
Avatar for Addy Osmani addyosmani
1371
200k
Why Our Code Smells
Avatar for Brandon Keepers bkeepers
PRO
340
57k
GitHub's CSS Performance
Avatar for Jon Rohan jonrohan
1032
470k
jQuery: Nuts, Bolts and Bling
Avatar for Doug Neiner dougneiner
65
7.9k

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