Upgrade to Pro — share decks privately, control downloads, hide ads and more …

React Nativeで作る色々なジェスチャー

Avatar for Yosuke Saito Yosuke Saito
February 08, 2018
Programming
1.7k
3

React Nativeで作る色々なジェスチャー

LT on React Native Meetup #7

Avatar for Yosuke Saito

Yosuke Saito

February 08, 2018

More Decks by Yosuke Saito

See All by Yosuke Saito
DEIM2022 補助行動データと明示的な選好データを活用した求人推薦手法
Avatar for Yosuke Saito saitoxu
0
160
論文紹介: Learning Recommender Systems with Implicit Feedback via Soft Target Enhancement (SIGIR’21)
Avatar for Yosuke Saito saitoxu
0
320

Other Decks in Programming

See All in Programming
AIで効率化できた業務・日常
Avatar for Ochtum ochtum
0
120
Claspは野良GASの夢をみるか
Avatar for てらうちたかし takter00
0
180
「なぜそう決めたのか」を残し続ける仕組み ― Notion AI カスタムエージェント × Slack連携による設計判断の自動記録 - NIKKEI Tech Talk #47
Avatar for ニフティ株式会社 niftycorp
PRO
0
110
AI時代のUIはどこへ行く？その2！
Avatar for Yusuke Wada yusukebe
21
7k
Modding RubyKaigi for Myself
Avatar for yui-knk yui_knk
0
920
脅威をエンジニアリングの糧にして――現場編 / Turning Threats into Engineering Fuel — Field Edition
Avatar for nrs nrslib
0
270
Agentic UI
Avatar for Manfred Steyer manfredsteyer
PRO
0
140
[2026年度第1回ORセミナー] 計画最適化ベンチャーと競技プログラミング人材
Avatar for terry-u16 terryu16
0
260
TypeScript+Orvalで実現する型安全かつ堅牢でスケーラブルなマルチチャネル通知基盤 / TSKaigi Night talks ~after conference~
Avatar for doriven d0riven
0
320
ECSアプリログをFireLensでコスト削減しようとしたけど諦めた話 in Fargate×Node.js
Avatar for アキキー | Akihisa Ikeda akihisaikeda
2
4k
Composerを使ったサプライチェーン攻撃の様子を眺めてみる #phpstudy
Avatar for hideki kinjyo o0h
PRO
2
240
Datadog × OpenTelemetry 入門と実践のあいだ
Avatar for Max Kento kn_to_maxpno
1
150

Featured

See All Featured
So, you think you're a good person
Avatar for Per Axbom axbom
PRO
2
2.1k
The agentic SEO stack - context over prompts
Avatar for schlessera schlessera
0
810
Leading Effective Engineering Teams in the AI Era
Avatar for Addy Osmani addyosmani
9
2k
JAMstack: Web Apps at Ludicrous Speed - All Things Open 2022
Avatar for David Neal reverentgeek
1
470
DevOps and Value Stream Thinking: Enabling flow, efficiency and business value
Avatar for Helen Beal helenjbeal
1
230
Bash Introduction
Avatar for André Augusto Costa Santos 62gerente
615
220k
The #1 spot is gone: here's how to win anyway
Avatar for Tamara Novitovic tamaranovitovic
2
1.1k
Scaling GitHub
Avatar for Zach Holman holman
464
140k
Joys of Absence: A Defence of Solitary Play
Avatar for Sebastian Deterding codingconduct
1
390
svc-hook: hooking system calls on ARM64 by binary rewriting
Avatar for Akira Moroo retrage
2
290
Rebuilding a faster, lazier Slack
Avatar for samanthasiow samanthasiow
85
9.5k
AI Search: Implications for SEO and How to Move Forward - #ShenzhenSEOConference
Avatar for Aleyda Solis aleyda
1
1.3k

Transcript

  1. @saitoxu React NativeͰ࡞Δ ৭ʑͳδΣενϟʔ

  2. ࣗݾ঺հ • @saitoxu ʢ͍͞ͱ͏ʣ • Co-Founder&CTO@Carat Inc. • 2ظ໨ʹೖͬͨ͹͔ΓͷελʔτΞο ϓ

    • React, React Native, Rails, Python… • ωΠςΟϒ͸झຯͰ͔͠ॻ͍ͨ͜ͱͳ ͍Ϛϯ

  3. αʔϏε঺հ • ٻ৬ɾస৬ΞϓϦGLITʢάϦοτʣ • TinderϥΠΫͳUI͕ಛ௃ • https://glit.io • React Native੡

    • ͕ͩݱࡏiOS൛ͷΈ.. • JSΤϯδχΞઈࢍืूͯ͠·͢..ʂ

  4. ΞϓϦͰΑ͘࢖͏ δΣενϟʔ

  5. 1. λοϓ 2. ௕ԡ͠ 3. μϒϧλοϓ 4. υϥοά 5. εϫΠϓ

    6. ϐϯνΠϯˍϐϯνΞ΢τ

  6. React NativeͰ Ͳ͏࡞Δ͔ʁ

  7. 1. λοϓ • Touchable*ίϯϙʔωϯτΛ࢖༻

  8. 2. ௕ԡ͠ • Touchable*ίϯϙʔωϯτͷonLongPressͱ͍͏props Λ࢖༻

  9. 3. μϒϧλοϓ • Touchable*ͷonPressൃՐͷִ͕ؒx msҎ಺ͩͬͨΒμϒϧλοϓͱΈͳ͢

  10. 3. μϒϧλοϓ • Touchable*ͷonPressൃՐͷִ͕ؒx msҎ಺ͩͬͨΒμϒϧλοϓͱΈͳ͢

  11. 4. υϥοά • δΣενϟʔΛѻ͏PanResponderΛ࢖༻ • evt΍gestureStateΛհͯ͠Componentͷ࠲ඪ΍ҠಈྔͳͲ͕औಘͰ͖Δ

  12. None

  13. pan.x pan.y (1) ॳظԽ

  14. offset x + 0 offset y + 0 (2) υϥοά։࢝࣌

  15. offset x offset y dx dy (3) υϥοάத

  16. pan.x pan.y (4) ཭ͨ͠ޙ

  17. 5. εϫΠϓ • υϥοάͱ͋·ΓมΘΒͳ͍ • ᮢ஋ͷઃఆͱΞχϝʔγϣϯ͕ඞཁ υϥοάͯ͠ᮢ஋Λ௒͑Δ ΞχϝʔγϣϯͰඈΜͰ͘

  18. dx threshold decay

  19. 6. ϐϯνΠϯˍϐϯνΞ΢τ • gestureState.numberActiveTouches: ༗ޮͳ λονͷ਺ • evt.nativeEvent.touches: λονΠϕϯτͷΦ ϒδΣΫτɻλον͞Εͨ৔ॴͷ࠲ඪͳͲ͕ೖͬ

    ͍ͯΔ

  20. distance

  21. distance

  22. ͓ΘΓʹ • جຊతͳδΣενϟʔͷ࣮૷Λ঺հ͠·ͨ͠ • ͜ΕΒͷδΣενϟʔ΍AnimationͳͲΛ͞Β ʹ૊Έ߹ΘͤɺωΠςΟϒͬΆ͍͍͍ײ͡ͷ UI/UXΛ࡞͍͖ͬͯ·͠ΐ͏

  23. Thanks!!