Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
React Nativeで作る色々なジェスチャー
Search
Yosuke Saito
February 08, 2018
Programming
3
1.6k
React Nativeで作る色々なジェスチャー
LT on React Native Meetup #7
Yosuke Saito
February 08, 2018
Tweet
Share
More Decks by Yosuke Saito
See All by Yosuke Saito
DEIM2022 補助行動データと明示的な選好データを活用した求人推薦手法
saitoxu
0
130
論文紹介: Learning Recommender Systems with Implicit Feedback via Soft Target Enhancement (SIGIR’21)
saitoxu
0
290
Other Decks in Programming
See All in Programming
Goで作る、開発・CI環境
sin392
0
230
Modern Angular with Signals and Signal Store:New Rules for Your Architecture @enterJS Advanced Angular Day 2025
manfredsteyer
PRO
0
220
すべてのコンテキストを、 ユーザー価値に変える
applism118
3
1.3k
PHPでWebSocketサーバーを実装しよう2025
kubotak
0
290
Porting a visionOS App to Android XR
akkeylab
0
460
Node-RED を(HTTP で)つなげる MCP サーバーを作ってみた
highu
0
120
Code as Context 〜 1にコードで 2にリンタ 34がなくて 5にルール? 〜
yodakeisuke
0
130
High-Level Programming Languages in AI Era -Human Thought and Mind-
hayat01sh1da
PRO
0
780
生成AI時代のコンポーネントライブラリの作り方
touyou
1
220
AI時代のソフトウェア開発を考える(2025/07版) / Agentic Software Engineering Findy 2025-07 Edition
twada
PRO
87
29k
設計やレビューに悩んでいるPHPerに贈る、クリーンなオブジェクト設計の指針たち
panda_program
6
2.1k
git worktree × Claude Code × MCP ~生成AI時代の並列開発フロー~
hisuzuya
1
570
Featured
See All Featured
Balancing Empowerment & Direction
lara
1
430
実際に使うSQLの書き方 徹底解説 / pgcon21j-tutorial
soudai
PRO
181
54k
Product Roadmaps are Hard
iamctodd
PRO
54
11k
A Modern Web Designer's Workflow
chriscoyier
695
190k
Design and Strategy: How to Deal with People Who Don’t "Get" Design
morganepeng
130
19k
Making the Leap to Tech Lead
cromwellryan
134
9.4k
The Psychology of Web Performance [Beyond Tellerrand 2023]
tammyeverts
48
2.9k
Exploring the Power of Turbo Streams & Action Cable | RailsConf2023
kevinliebholz
34
5.9k
Raft: Consensus for Rubyists
vanstee
140
7k
Responsive Adventures: Dirty Tricks From The Dark Corners of Front-End
smashingmag
251
21k
Being A Developer After 40
akosma
90
590k
Evolution of real-time – Irina Nazarova, EuRuKo, 2024
irinanazarova
8
820
Transcript
@saitoxu React NativeͰ࡞Δ ৭ʑͳδΣενϟʔ
ࣗݾհ • @saitoxu ʢ͍͞ͱ͏ʣ • Co-Founder&CTO@Carat Inc. • 2ظʹೖ͔ͬͨΓͷελʔτΞο ϓ
• React, React Native, Rails, Python… • ωΠςΟϒझຯͰ͔͠ॻ͍ͨ͜ͱͳ ͍Ϛϯ
αʔϏεհ • ٻ৬ɾస৬ΞϓϦGLITʢάϦοτʣ • TinderϥΠΫͳUI͕ಛ • https://glit.io • React Native
• ͕ͩݱࡏiOS൛ͷΈ.. • JSΤϯδχΞઈࢍืूͯ͠·͢..ʂ
ΞϓϦͰΑ͘͏ δΣενϟʔ
1. λοϓ 2. ԡ͠ 3. μϒϧλοϓ 4. υϥοά 5. εϫΠϓ
6. ϐϯνΠϯˍϐϯνΞτ
React NativeͰ Ͳ͏࡞Δ͔ʁ
1. λοϓ • Touchable*ίϯϙʔωϯτΛ༻
2. ԡ͠ • Touchable*ίϯϙʔωϯτͷonLongPressͱ͍͏props Λ༻
3. μϒϧλοϓ • Touchable*ͷonPressൃՐͷִ͕ؒx msҎͩͬͨΒμϒϧλοϓͱΈͳ͢
3. μϒϧλοϓ • Touchable*ͷonPressൃՐͷִ͕ؒx msҎͩͬͨΒμϒϧλοϓͱΈͳ͢
4. υϥοά • δΣενϟʔΛѻ͏PanResponderΛ༻ • evtgestureStateΛհͯ͠Componentͷ࠲ඪҠಈྔͳͲ͕औಘͰ͖Δ
None
pan.x pan.y (1) ॳظԽ
offset x + 0 offset y + 0 (2) υϥοά։࢝࣌
offset x offset y dx dy (3) υϥοάத
pan.x pan.y (4) ͨ͠ޙ
5. εϫΠϓ • υϥοάͱ͋·ΓมΘΒͳ͍ • ᮢͷઃఆͱΞχϝʔγϣϯ͕ඞཁ υϥοάͯ͠ᮢΛ͑Δ ΞχϝʔγϣϯͰඈΜͰ͘
dx threshold decay
6. ϐϯνΠϯˍϐϯνΞτ • gestureState.numberActiveTouches: ༗ޮͳ λονͷ • evt.nativeEvent.touches: λονΠϕϯτͷΦ ϒδΣΫτɻλον͞Εͨॴͷ࠲ඪͳͲ͕ೖͬ
͍ͯΔ
distance
distance
͓ΘΓʹ • جຊతͳδΣενϟʔͷ࣮Λհ͠·ͨ͠ • ͜ΕΒͷδΣενϟʔAnimationͳͲΛ͞Β ʹΈ߹ΘͤɺωΠςΟϒͬΆ͍͍͍ײ͡ͷ UI/UXΛ࡞͍͖ͬͯ·͠ΐ͏
Thanks!!