React native 修改图像并将其移回初始位置后，对本机Panresponder问题作出反应

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

从“React”导入React，{Component}； 从“react native”导入{样式表、视图、文本、PanResponder、动画、宽松、尺寸、图像、按钮}； 从“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,
  },
});

---

您正在收听手指运动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.setOffsetthis.state.panBike.\uu getValue；this.state.panBike.setValue{x:0，y:0}；这是正确的。是的，这可以工作，但是要小心。_getValue和。_value。如果您决定将来在动画中使用NativeDriver，则该值不会更改。您可能需要查看Animated.Value上的.addListener函数。类似于panCar.x.addListener{value}=>this.\uxvalue=value并使用\uxvalue和\uyvalue设置偏移量。我还有一个疑问，那就是如何设置Animated.spring默认初始值？恐怕我不理解这个问题。Animated.spring只驱动一个Animated.Value，它已经有了一个初始值，您可以使用它来创建它。可以指定弹簧动画的反弹程度，但我不确定默认值的含义。