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

by Yosuke Saito

Slide 1

Slide 1 text

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

Slide 2

Slide 2 text

ࣗݾ঺հ • @saitoxu ʢ͍͞ͱ͏ʣ • Co-Founder&CTO@Carat Inc. • 2ظ໨ʹೖͬͨ͹͔ΓͷελʔτΞο ϓ • React, React Native, Rails, Python… • ωΠςΟϒ͸झຯͰ͔͠ॻ͍ͨ͜ͱͳ ͍Ϛϯ

Slide 3

Slide 3 text

αʔϏε঺հ • ٻ৬ɾస৬ΞϓϦGLITʢάϦοτʣ • TinderϥΠΫͳUI͕ಛ௃ • https://glit.io • React Native੡ • ͕ͩݱࡏiOS൛ͷΈ.. • JSΤϯδχΞઈࢍืूͯ͠·͢..ʂ

Slide 4

Slide 4 text

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

Slide 5

Slide 5 text

1. λοϓ 2. ௕ԡ͠ 3. μϒϧλοϓ 4. υϥοά 5. εϫΠϓ 6. ϐϯνΠϯˍϐϯνΞ΢τ

Slide 6

Slide 6 text

React NativeͰ Ͳ͏࡞Δ͔ʁ

Slide 7

Slide 7 text

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

Slide 8

Slide 8 text

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

Slide 9

Slide 9 text

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

Slide 10

Slide 10 text

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

Slide 11

Slide 11 text

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

Slide 12

Slide 12 text

No content

Slide 13

Slide 13 text

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

Slide 14

Slide 14 text

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

Slide 15

Slide 15 text

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

Slide 16

Slide 16 text

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

Slide 17

Slide 17 text

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

Slide 18

Slide 18 text

dx threshold decay

Slide 19

Slide 19 text

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

Slide 20

Slide 20 text

distance

Slide 21

Slide 21 text

distance

Slide 22

Slide 22 text

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

Slide 23

Slide 23 text

Thanks!!