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.4k
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
110
論文紹介: Learning Recommender Systems with Implicit Feedback via Soft Target Enhancement (SIGIR’21)
saitoxu
0
270
Other Decks in Programming
See All in Programming
12年前の『型システム入門』翻訳の思い出話
mame
11
1.2k
Terraformテスト入門
msato
0
520
Cloudflare Workers x AWS Lambdaの組み合わせユースケース / Cloudflare Workers x AWS Lambda Combination Use Case
seike460
PRO
2
310
Trial
cairolibrary720
1
130
유연한 Composable 설계
l2hyunwoo
0
380
OpenAI/Gemini APIを使って EPUBを翻訳するCLIツールをつくってみた
tomiyan
0
790
Introduction to GitOps
hwchiu
0
110
DynamoDB コスト最適化っぽいことの基本 with Terraform
kuro_kurorrr
2
250
しくじり先生 Image Matching Challenge 2024 編
goosehaaan
0
810
Javaの現状2024夏 / Java current status 2024 summer
kishida
4
1.4k
Play Billing Library 7.0.0 変更点まとめ@potatotips#88
kako351
0
160
How to use Macrobenchmark
veronikapj
0
160
Featured
See All Featured
Helping Users Find Their Own Way: Creating Modern Search Experiences
danielanewman
26
2.1k
Web Components: a chance to create the future
zenorocha
307
41k
Learning to Love Humans: Emotional Interface Design
aarron
269
39k
Agile that works and the tools we love
rasmusluckow
325
20k
Debugging Ruby Performance
tmm1
71
11k
Scaling GitHub
holman
458
140k
WebSockets: Embracing the real-time Web
robhawkes
59
7.2k
Designing the Hi-DPI Web
ddemaree
276
34k
Build The Right Thing And Hit Your Dates
maggiecrowley
28
2.2k
Being A Developer After 40
akosma
72
580k
How STYLIGHT went responsive
nonsquared
93
5k
Documentation Writing (for coders)
carmenintech
63
4.2k
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!!