rn-函數式組件開啓手勢動畫

import React, { useState, useLayoutEffect } from 'react'
import { StyleSheet, Animated, PanResponder } from 'react-native'
import { Container, Title } from '../styled/index'

const TestAnimated = () => {
  const [lateX, setLateX] = useState(0)
  const [lateY, setLateY] = useState(0)

  const _panResponder = PanResponder.create({
    onStartShouldSetPanResponder: () => true,
    onPanResponderGrant: (evt, gestureState) => {
      console.log('Grant')
    },
    onPanResponderMove: (evt, gestureState) => {
      setLateX(lateX => gestureState.dx + lateX)
      setLateY(lateY => gestureState.dy + lateY)
      // setLateX(gestureState.dx + lateX)
      // setLateY(gestureState.dy + lateY)
      // 不能這樣寫setLateY(gestureState.dy)
    },
    onPanResponderRelease: (evt, gestureState) => {
      console.log('lease')
    }
  })

  return (
    <Container>
      <AnimatedTitle
        {..._panResponder.panHandlers}
        style={{
          transform: [
            { translateX: lateX },
            { translateY: lateY }
          ]
        }}
        color='#cb0'
        size='70px'
      >
        hook animated
      </AnimatedTitle>
    </Container>
  )
}

export default TestAnimated

const AnimatedTitle = Animated.createAnimatedComponent(Title)
const styles = StyleSheet.create({})