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
2分台で1500examples完走!爆速CIを支える環境構築術 - Kaigi on Rails 2025
falcon8823
3
3.2k
The Past, Present, and Future of Enterprise Java
ivargrimstad
0
140
LLMとPlaywright/reg-suitを活用した jQueryリファクタリングの実際
kinocoboy2
4
670
CI_CD「健康診断」のススメ。現場でのボトルネック特定から、健康診断を通じた組織的な改善手法
teamlab
PRO
0
180
Advance Your Career with Open Source
ivargrimstad
0
340
iOSアプリの信頼性を向上させる取り組み/ios-app-improve-reliability
shino8rayu9
0
150
アメ車でサンノゼを走ってきたよ!
s_shimotori
0
140
GraphQL×Railsアプリのデータベース負荷分散 - 月間3,000万人利用サービスを無停止で
koxya
1
1.1k
デミカツ切り抜きで面倒くさいことはPythonにやらせよう
aokswork3
0
190
ИИ-Агенты в каждый дом – Алексей Порядин, PythoNN
sobolevn
0
150
育てるアーキテクチャ:戦い抜くPythonマイクロサービスの設計と進化戦略
fujidomoe
1
150
NetworkXとGNNで学ぶグラフデータ分析入門〜複雑な関係性を解き明かすPythonの力〜
mhrtech
3
1k
Featured
See All Featured
What's in a price? How to price your products and services
michaelherold
246
12k
Keith and Marios Guide to Fast Websites
keithpitt
411
22k
The Pragmatic Product Professional
lauravandoore
36
6.9k
Principles of Awesome APIs and How to Build Them.
keavy
127
17k
Code Review Best Practice
trishagee
72
19k
Building Adaptive Systems
keathley
43
2.8k
The Art of Programming - Codeland 2020
erikaheidi
56
14k
XXLCSS - How to scale CSS and keep your sanity
sugarenia
248
1.3M
[RailsConf 2023] Rails as a piece of cake
palkan
57
5.9k
Bash Introduction
62gerente
615
210k
How GitHub (no longer) Works
holman
315
140k
Six Lessons from altMBA
skipperchong
28
4k
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!!