react-native - React Native Reanimated 仅允许在特定区域拖动

Question

我正在为有特殊需要的学生开发一个应用程序，以便他们学习如何写作。为此，他们需要大量重复追踪字母，我认为使用 reanimated 将是实现这一目标的最佳方式。到目前为止，我有一个可以在屏幕上任意拖动的圆圈，但我需要的是它只能在特定区域内拖动。该区域将是一个字母（例如“A”），学生需要将其从头拖到尾，并且不能超出它。从本质上讲，他们将追踪这封信。但是，这是我的第一个反应原生项目，我很困惑。谁能帮我解决这个问题？这是我目前拥有的代码：

import React, { useState } from 'react'
import {
  StyleSheet,
  View,
  Dimensions,
} from 'react-native'
import { PanGestureHandler, State } from 'react-native-gesture-handler'
import Animated from "react-native-reanimated"

const { Value, event, cond, eq, add, set, interpolate, extrapolate } = Animated
const {width, height } = Dimensions.get('window')
export default class App extends React.Component {
  dragX = new Value(0)
  dragY = new Value(0)
  gestureState = new Value(-1)
  offsetX = new Value(width/2)
  offsetY = new Value(height/2)

  onGestureEvent = event([
    {
      nativeEvent: {
        translationX: this.dragX,
        translationY: this.dragY,
        state: this.gestureState
      }
    }
  ])
  transX = cond(
     eq(this.gestureState, State.ACTIVE),
     add(this.offsetX, this.dragX),
     set(this.offsetX, add(this.offsetX, this.dragX))
  )
  transY = cond(
    eq(this.gestureState, State.ACTIVE),
    add(this.offsetY, this.dragY),
    set(this.offsetY, add(this.offsetY, this.dragY))
 )

 opacity = interpolate(this.transY, {
  inputRange: [0, height],
  outputRange: [0.1,1 ]
 })
  
  render() {
    return (
      <View style={styles.container}>
        <PanGestureHandler onGestureEvent={this.onGestureEvent}
        onHandlerStateChange={this.onGestureEvent}
        >
          <Animated.View style={[styles.box, {
            opacity: this.opacity,
            transform: [{
              translateX: this.transX,
              translateY: this.transY,
            }]
          }]}/>
        </PanGestureHandler>
      </View>
    )
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#fff',
  },
  box: {
    width: 50,
    height: 50,
    marginLeft: 34,
    marginTop: 115,
    backgroundColor: 'blue',
    zIndex: 200,
    borderRadius: 30,
  },
  image: {
    flex: 1,
    resizeMode: 'cover',
    justifyContent: 'center',
    height: 500,
  },
})

任何帮助将不胜感激！

标签： react-nativedrag-and-dropdragreact-native-reanimatedreact-native-reanimated-v2