React Spring関連

React Native Gesture Handler

• Gesture.Fling()
  • いわゆるフリック動作
• Gesture.Race()
  • 複数のジェスチャーをまとめる
• Gesture.Manual()
  • 細かく動作に応じた処理を設定したい場合に使う？

import React, { useState } from 'react';
import { useSpring, animated } from '@react-spring/native';
import { Gesture, GestureDetector } from 'react-native-gesture-handler';

export const Hoge = () => {
  const [{ initialX, initialY }, setInitial] = useState({ initialX: 0, initialY: 0 });
  const [{ mx, my }, api] = useSpring(() => ({ mx: 0, my: 0 }));

  const gesture = Gesture.Manual()
    .onTouchesDown(e => setInitial({ initialX: e.changedTouches[0].x, initialY: e.changedTouches[0].y }))
    .onTouchesMove(e => {
      const touch = e.changedTouches[0];
      api.start({ mx: touch.x - initialX, my: touch.y - initialY });
    })
    .onTouchesUp(() => api.start({ mx: 0, my: 0 }));

  return (
    <GestureDetector gesture={gesture}>
      <animated.Image
        style={[styles.image, { transform: [{ translateX: mx }, { translateY: my }] }]}
        source={require('./hoge.jpg')
      />
    </GestureDetector>
  );
};

こんな感じで画像をぐりぐり動かせるようになる。

web version (@react-spring/web) における x と y は transform: [{ translateX: x }, { translate: y }] の糖衣構文っぽい。実際には多分諸所の問題解決や微調整を含んでいるだろうけど。
ともかく、React Native上で上下左右の移動量を定義したい場合は transform を利用すればいい。

https://docs.swmansion.com/react-native-gesture-handler/docs/under-the-hood/states-events

The flow looks as follows (longer arrows represent that there are possibly more touch events received before the state changes):

UNDETERMINED -> BEGAN ------> ACTIVE ------> END -> UNDETERMINED

Another possible flow is when a handler receives touches that cause a recognition failure:

UNDETERMINED -> BEGAN ------> FAILED -> UNDETERMINED

At last, when a handler does properly recognize the gesture but then is interrupted by the touch system the gesture recognition is canceled and the flow looks as follows:

UNDETERMINED -> BEGAN ------> ACTIVE ------> CANCELLED -> UNDETERMINED

普通にやる分にはActiveで開始処理、Endで終了処理で良さそう。