修饰并移动图像返回初始位置后反应本机 Panresponder 问题

Posted 2023-04-15

【中文标题】修饰并移动图像返回初始位置后反应本机 Panresponder 问题

【英文标题】：React Native Panresponder issue after retouching and moving the image return back to initial position

【发布时间】：2020-06-16 20:06:16

【问题描述】：

我有一个可拖动的汽车图像，如果我第一次拖动汽车，它在第二次重新拖动汽车图像返回到初始位置后工作正常。我想用手指触摸平滑和可拖动的图像。请帮帮我

从'react'导入反应，组件； import StyleSheet, View, Text, PanResponder, Animated, Easing, Dimensions, Image, Button from 'react-native'; 从'react-native'导入 Toastandroid；

export default class Viewport extends Component 
  constructor(props) 
    super(props);

    this.state = 
      disableCar: false,
      dropZoneCar: null,
      panCar: new Animated.ValueXY(),
    ;
    this.carFunction();
  

  carFunction = () => 
    this.panResponderCar = PanResponder.create(
      onStartShouldSetPanResponder: () => true,
      onPanResponderMove: Animated.event([null, 
        dx: this.state.panCar.x,
        dy: this.state.panCar.y
      ]),
      onPanResponderGrant: (evt, gestureState) => 
        console.log(evt)
      ,

      onPanResponderRelease: (e, gesture) => 
        // console.log(e)

        if (this.isDropZoneCar(gesture)) 
          ToastAndroid.show('Correct', ToastAndroid.SHORT);
         else 
          ToastAndroid.show('Wrong', ToastAndroid.SHORT);
        
      
    );
  

  isDropZoneCar(gesture) 
    var dz = this.state.dropZoneCar;
    return gesture.moveY > dz.y && gesture.moveY < dz.y + dz.height;
  

  setDropZoneCar(event) 
    this.setState(
      dropZoneCar: event.nativeEvent.layout
    );
  
  setDropZoneBike(event) 
    this.setState(
      dropZoneBike: event.nativeEvent.layout
    );
  
  render() 

    return (
      <View style=styles.mainContainer>
        <View style= flexDirection: 'row', >
          <View style= flex: 1 >
            <View
              onLayout=this.setDropZoneCar.bind(this)
              style=[styles.dropZone,  backgroundColor: this.state.disableCar ? 'green' : '#2c3e50' ]>
              <Text style=styles.text>Drop a Car</Text>
            </View>
            <View
              onLayout=this.setDropZoneBike.bind(this)
              style=[styles.dropZone,  backgroundColor: this.state.disableCar ? 'green' : '#2c3e50' ]>
              <Text style=styles.text>Drop a Bike</Text>
            </View>
          </View>
          <View style= flex: 1 >
            this.draggableCar()
          </View>
        </View>
      </View>
    );
  

  draggableCar() 
    return (
      <View style=styles.draggableContainer >
        <Animated.View
          ...this.panResponderCar.panHandlers
          style=[this.state.panCar.getLayout()]>
          <Image
            style= position: "absolute", width: 200, height: 100, right: 10, top: 300, 
            source=require('./assets/carr.png')
          />
        </Animated.View>
      </View>
    );
  


let CIRCLE_RADIUS = 36;
let Window = Dimensions.get('window');
let styles = StyleSheet.create(
  mainContainer: 
    flex: 1
  ,
  dropZone: 
    height: 100,
    backgroundColor: '#2c3e50',
    marginTop: 100
  ,
  text: 
    marginTop: 25,
    marginLeft: 5,
    marginRight: 5,
    textAlign: 'center',
    color: '#fff'
  ,
  draggableContainer: 
    position: 'absolute',
    top: Window.height / 2 - CIRCLE_RADIUS,
    left: Window.width / 2 - CIRCLE_RADIUS,
  ,
);

【参考方案1】：

您正在收听手指运动 dx 和 dy 的增量，因此无论何时再次触摸，您的平移值都会下降到 0 的值。每次触摸以修复此问题时，都应在平移值上设置偏移量。添加这段代码：

onPanResponderGrant: (e, gestureState) => 
  this.state.panCar.setOffset(x: this.state.panCar.x._value, y: this.state.panCar.y._value);
  this.state.panCar.setValue(x: 0, y: 0);

这会将平移的偏移设置为当前位置，因此在随后的触摸后它不会跳回。希望这会有所帮助。

【讨论】：

this.state.panBike.setOffset(this.state.panBike.__getValue()); this.state.panBike.setValue( x: 0, y: 0 );这是正确的

是的，这可以工作，但要小心 ._getValue() 和 ._value。如果您决定将来在动画中使用NativeDriver，则该值不会改变。您可能想查看 Animated.Value 上的 .addListener() 函数。类似于 panCar.x.addListener((value) => this._xValue = value) 并使用 _xValue 和 _yValue 来设置偏移量。

我还有疑问如何设置Animated.spring默认初始值？

恐怕我不明白这个问题。 Animated.spring 只是驱动一个 Animated.Value，它已经有一个你创建它的初始值。您可以指定弹簧动画的“弹性”程度，但我不确定您的默认值是什么意思。