Làm thế nào để làm cho draggable nhớ vị trí của nó trong React Native

Question

Tôi đang tìm hiểu về hoạt ảnh và apresponder apis trong phản ứng bản địa. Theo dõi Animated Drag and Drop with React Native và source

Tôi muốn mở rộng ví dụ để bạn có thể kéo vòng tròn mà không phải đặt lại. Hiện tại, mã này sẽ làm tròn vòng tròn trở lại giữa màn hình và dựa vào các giá trị dres/dY panresponders.

đoán tốt nhất của tôi là tôi phải thay đổi điều gì đó trong onPanResponderMove

onPanResponderMove: Animated.event([null, { 
    dx: this.state.pan.x, 
    dy: this.state.pan.y, 
    }]), 

sao tôi cần phải thay đổi trong nguồn vì vậy nếu tôi nhận xét ra logic onPanResponderRelease vòng tròn đúng cách kéo xung quanh màn hình gì?

getTranslateTransform()?

Answer 1

Logic trong onPanResponderRelease là làm cho nó sao cho nếu không thể kéo được trong vùng thả xuống khi được thả, nó được đặt lại về 0,0 (these are the lines causing it).

Loại bỏ logic đó không phải là tất cả những gì bạn nên làm. Bạn nên đặt độ lệch và đặt lại giá trị của this.state.pan trong onPanResponderRelease. Để làm điều này, bạn cần theo dõi giá trị.

Trong componentDidMount, thêm này:

this.currentPanValue = {x: 0, y: 0}; 
this.panListener = this.state.pan.addListener((value) => this.currentPanValue = value); 

Sau đó, trong componentWillUnmount:

this.state.pan.removeListener(this.panListener); 

Bây giờ bạn có giá trị hiện tại, bạn chỉ cần thêm này đến PanResponder:

onPanResponderRelease: (e, gestureState) => { 
    this.state.pan.setOffset({x: this.currentPanValue.x, y: this.currentPanValue.y}); 
    this.state.pan.setValue({x: 0, y: 0}); 
}, 

Có vẻ phức tạp hơn thực tế. Về cơ bản bạn chỉ cần thiết lập offset từ 0/0, sau đó thiết lập giá trị thành 0/0 để khi bạn bắt đầu di chuyển nó một lần nữa sau khi đã phát hành nó trước đó, nó không nhảy trở lại 0/0 trước khi nhảy trở lại vị trí của bạn ngón tay là. Nó cũng đảm bảo bạn có vị trí hiện tại của nó ... mà bạn có thể sẽ cần tại một số điểm nào đó.

Answer 2

Thực tế điều duy nhất bạn cần thay đổi là chức năng onPanResponderRelease. Những gì bạn đang làm là áp dụng đồng bằng của cử chỉ cử chỉ đến vị trí ban đầu của thành phần. Những gì bạn muốn làm là áp dụng nó vào vị trí ở cuối cử chỉ cuối cùng. Vì vậy, bạn bằng cách nào đó cần phải tiết kiệm bù đắp. AnimatedValueXY.setOffset để giải cứu!

onPanResponderRelease : (e, gesture) => { 
    if(this.isDropZone(gesture)){ 
     this.setState({ 
      showDraggable : false 
     }); 
    }else{ 
     this.state.pan.setOffset({ 
      x: this.state.pan.x._offset + e.dx, 
      y: this.state.pan.y._offset + e.dy, 
     }) 
     this.state.pan.setValue({x: 0, y: 0}) 
} 

Tôi đang sử dụng biến _offset bên trong ở đây vì tôi có thể tìm cách truy cập vào thông qua API. Bạn có thể tắt khóa học cũng chỉ theo dõi việc bù đắp bằng tay. Tôi chưa thử mã này, nhưng bạn có ý tưởng.

Answer 3

Một cách khác là theo dõi bù đắp hiện tại và tiếp tục thêm nó vào chảo.Vì vậy, tuyên bố này trong các nhà xây dựng currentPanValue : {x: 0, y: 0},

Và chỉnh sửa onPanResponderRelease như sau:

onPanResponderRelease   : (e, gesture) => { 
       this.state.currentPanValue.x += this.state.pan.x._value; 
       this.state.currentPanValue.y += this.state.pan.y._value; 

       this.state.pan.setOffset({x: this.state.currentPanValue.x, y: this.state.currentPanValue.y}); 
       this.state.pan.setValue({x: 0, y: 0}); 
      } 

Trong trường hợp nếu bạn muốn các tọa độ cuối cùng, bạn sẽ nhận được nó với this.state.currentPanValue