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

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
2年かけて Deno に DOMMatrix を実装した話 / How I implemented DOMMatrix in Deno over two years
Avatar for petamoriken / 森建 petamoriken
0
220
freeeにおけるEvalsの実践例の紹介
Avatar for freee freee
PRO
0
140
ソフトウェアラスタライザ
Avatar for Fadis fadis
1
510
Discordを用いたラボオートメーション関連情報収集の自動化
Avatar for noguhiro2002 noguhiro2002
0
390
夏だ！祭りだ！祭りとはドメインモデリングでは？
Avatar for ryugen04 ryugen04
0
360
まだ間に合う！今年の夏こそSchemeのマクロ展開器を完全理解！
Avatar for Masanori Ogino omasanori
0
410
Go 1.27 における memory allocation の高速化
Avatar for ANDPAD inc andpad
0
300
異なる設計思想のフレームワークを経験して得た学び
Avatar for amekuhideki amekuhideki
1
220
[PyCon KR 2026] More Variants, More Diversity for AI Accelerators
Avatar for Joongi Kim achimnol
0
110
komatsuna「分散システムにおけるバグ分析手法」
Avatar for こまつな komatsunaqa
0
270
実装をデザインガイドラインに追従させるための取り組み / 260731-dip-mosh-design-system
Avatar for dachi dachi023
0
7.6k
FastAPI の並行処理モデルを完全に理解する
Avatar for Yuki Ishikawa hoto17296
8
2.8k

Featured

See All Featured
Facilitating Awesome Meetings
Avatar for Lara Hogan lara
57
7.1k
Designing for Performance
Avatar for Lara Hogan lara
611
70k
Money Talks: Using Revenue to Get Sh*t Done
Avatar for Nikki Halliwell nikkihalliwell
0
470
Done Done
Avatar for chrislema chrislema
186
16k
Docker and Python
Avatar for Tania Allard trallard
47
4.1k
Organizational Design Perspectives: An Ontology of Organizational Design Elements
Avatar for Dr. Kim W Petersen kimpetersen
PRO
1
800
AI Search: Implications for SEO and How to Move Forward - #ShenzhenSEOConference
Avatar for Aleyda Solis aleyda
1
1.3k
How To Speak Unicorn (iThemes Webinar)
Avatar for Michelle Schulp Hunt marktimemedia
1
550
Getting science done with accelerated Python computing platforms
Avatar for Jacob Tomlinson jacobtomlinson
2
450
The SEO identity crisis: Don't let AI make you average
Avatar for Varn varn
0
530
Believing is Seeing
Avatar for Spiro Bolos oripsolob
1
200
RailsConf 2023
Avatar for Aaron Patterson tenderlove
30
1.5k

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