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
Advanced Micro Frontends: Multi Version/ Framework Scenarios @WAD 2025, Berlin
manfredsteyer
PRO
0
400
React は次の10年を生き残れるか:3つのトレンドから考える
oukayuka
15
4.6k
マッチングアプリにおけるフリックUIで苦労したこと
yuheiito
0
190
“いい感じ“な定量評価を求めて - Four Keysとアウトカムの間の探求 -
nealle
2
12k
システム成長を止めない!本番無停止テーブル移行の全貌
sakawe_ee
1
360
LT 2025-06-30: プロダクトエンジニアの役割
yamamotok
0
870
チームで開発し事業を加速するための"良い"設計の考え方 @ サポーターズCoLab 2025-07-08
agatan
1
470
テスト駆動Kaggle
isax1015
1
630
AI時代のソフトウェア開発を考える(2025/07版) / Agentic Software Engineering Findy 2025-07 Edition
twada
PRO
99
37k
レベル1の開発生産性向上に取り組む − 日々の作業の効率化・自動化を通じた改善活動
kesoji
0
300
Modern Angular with Signals and Signal Store:New Rules for Your Architecture @enterJS Advanced Angular Day 2025
manfredsteyer
PRO
0
270
状態遷移図を書こう / Sequence Chart vs State Diagram
orgachem
PRO
2
210
Featured
See All Featured
CSS Pre-Processors: Stylus, Less & Sass
bermonpainter
357
30k
Keith and Marios Guide to Fast Websites
keithpitt
411
22k
Optimizing for Happiness
mojombo
379
70k
Dealing with People You Can't Stand - Big Design 2015
cassininazir
367
26k
Save Time (by Creating Custom Rails Generators)
garrettdimon
PRO
31
1.3k
Why You Should Never Use an ORM
jnunemaker
PRO
58
9.5k
Chrome DevTools: State of the Union 2024 - Debugging React & Beyond
addyosmani
7
750
Side Projects
sachag
455
42k
Understanding Cognitive Biases in Performance Measurement
bluesmoon
29
1.8k
Sharpening the Axe: The Primacy of Toolmaking
bcantrill
44
2.4k
Stop Working from a Prison Cell
hatefulcrawdad
271
21k
Visualizing Your Data: Incorporating Mongo into Loggly Infrastructure
mongodb
47
9.6k
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!!