React Native Reanimated 只允许在特定区域拖动

问题描述

我正在为有特殊需求的学生开发一款应用，以便他们学习写作。要做到这一点，他们需要大量重复的追踪字母，我认为使用 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,this.dragX))
  )
  transY = cond(
    eq(this.gestureState,add(this.offsetY,this.dragY),set(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,})

任何帮助将不胜感激！

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）