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.5k
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
120
論文紹介: Learning Recommender Systems with Implicit Feedback via Soft Target Enhancement (SIGIR’21)
saitoxu
0
270
Other Decks in Programming
See All in Programming
Cloud Adoption Frameworkにみる組織とクラウド導入戦略(縮小版)
tomokusaba
1
180
App Router 悲喜交々
quramy
7
380
VS Code extension: ドラッグ&ドロップでファイルを並び替える
ttrace
0
160
CDKを活用した 大規模コンテナ移行 プロジェクトの紹介
yoyoyopg
0
240
利用者視点で考える、イテレータとの上手な付き合い方
syumai
4
220
"noncopyable types" の使いどころについて考えてみた
andpad
0
140
Pydantic x Database API:turu-pyの開発
yassun7010
1
530
perl for shell, awk and sed programmers
mackee
1
620
GitHub Copilot Workspace で我々のアプリ開発がどう変わるのか?
shuyakinjo
0
880
PHPを書く理由、PHPを書いていて良い理由 / Reasons to write PHP and why it is good to write PHP
seike460
PRO
5
360
色んなオートローダーを覗き見る #phpcon_okinawa
o0h
PRO
5
370
sqlcを利用してsqlに型付けを
kamiyam
0
240
Featured
See All Featured
Visualizing Your Data: Incorporating Mongo into Loggly Infrastructure
mongodb
41
9.2k
Automating Front-end Workflow
addyosmani
1365
200k
Producing Creativity
orderedlist
PRO
341
39k
Docker and Python
trallard
40
3k
GraphQLの誤解/rethinking-graphql
sonatard
65
9.9k
Designing with Data
zakiwarfel
98
5.1k
Save Time (by Creating Custom Rails Generators)
garrettdimon
PRO
25
660
JavaScript: Past, Present, and Future - NDC Porto 2020
reverentgeek
45
4.9k
Large-scale JavaScript Application Architecture
addyosmani
509
110k
I Don’t Have Time: Getting Over the Fear to Launch Your Podcast
jcasabona
26
1.9k
Refactoring Trust on Your Teams (GOTO; Chicago 2020)
rmw
30
2.6k
GitHub's CSS Performance
jonrohan
1030
450k
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!!