rn-函数式组件开启手势动画_rn 手动动画-优快云博客

本文链接：https://blog.youkuaiyun.com/printf_hello/article/details/106504678

本文介绍了一个使用React Native实现的动画组件示例，通过PanResponder处理拖动事件，使标题元素能够响应用户的拖动操作并进行位置更新。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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({})