ड्रैगगेबल को रीडक्ट नेटिव

Question

में यह स्थान याद रखने के लिए कैसे करें मैं प्रतिक्रिया मूल में एनीमेशन और पैनफोर्टर एपिस के बारे में सीख रहा हूं। Animated Drag and Drop with React Native और source

मैं उदाहरण का विस्तार करना चाहता हूं ताकि आप इसे रीसेट किए बिना सर्कल खींच सकें। वर्तमान में कोड सर्कल को स्क्रीन के केंद्र में वापस एनिमेट करता है और पैनडॉर्ड्स डीएक्स/डीवाई मानों पर निर्भर करता है।

मेरे सबसे अच्छे अनुमान मैं onPanResponderMove

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

में कुछ बदलने के लिए है क्या मैं इसलिए यदि मैं बाहर टिप्पणी onPanResponderRelease तर्क चक्र ठीक से स्क्रीन के चारों ओर खींच लेता है स्रोत में बदलने की जरूरत है?

getTranslateTransform()?

Answer 1

onPanResponderRelease में तर्क यह कर रहा है ताकि अगर खींचने योग्य dropzone में जब जारी नहीं किया है, यह 0,0 (these are the lines causing it) को वापस रीसेट है।

अकेले उस तर्क को हटाने के लिए आपको बस इतना करना नहीं चाहिए। आपको ऑफ़सेट सेट करना चाहिए और this.state.pan के मान को onPanResponderRelease में रीसेट करना चाहिए। ऐसा करने के लिए आपको मूल्य को ट्रैक करने की आवश्यकता है। componentWillUnmount में

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

फिर,:

componentDidMount में, यह जोड़ने अब आप वर्तमान मूल्य है

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

, तो आप सिर्फ PanResponder से जोड़ें:

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

यह वास्तव में उससे अधिक जटिल लगता है। असल में आप ऑफसेट को 0/0 से सेट कर रहे हैं, फिर मान को 0/0 पर सेट कर रहे हैं ताकि जब आप इसे रिलीज़ करने के बाद इसे फिर से चालू करना शुरू कर दें, तो यह वापस कूदने से पहले 0/0 पर वापस नहीं जाता है उंगली है यह भी सुनिश्चित करता है कि आपके पास वर्तमान स्थिति है ... जिसे आपको किसी भी समय किसी भी समय की आवश्यकता होगी।

Answer 2

वास्तव में केवल एक चीज जिसे आप बदलने की जरूरत है वह है ऑनपेनस्पॉन्डर रिलेक्शन फ़ंक्शन। वर्तमान में आप जो कर रहे हैं वह घटक की प्रारंभिक स्थिति में इशारा आंदोलन के डेल्टा को लागू कर रहा है। आप जो करना चाहते हैं वह आखिरी इशारा के अंत में स्थिति में आवेदन कर रहा है। तो आप किसी भी तरह ऑफसेट को बचाने की जरूरत है। बचाव के लिए एनिमेटेड ValueXY.setOffset!

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}) 
} 

मैं यहाँ आंतरिक _offset चर का उपयोग कर रहा हूँ क्योंकि मैं एपीआई के माध्यम से उस तक पहुंचने का रास्ता मिल सकता है। आप ऑफसेट को मैन्युअल रूप से ट्रैक भी ट्रैक कर सकते हैं। मैंने अभी तक इस कोड का परीक्षण नहीं किया है, लेकिन आपको विचार मिलता है।

Answer 3

एक और तरीका वर्तमान ऑफसेट को ट्रैक करना और पैन में जोड़ना होगा।तो निर्माता currentPanValue : {x: 0, y: 0},

में यह घोषणा करते हैं और निम्नलिखित के लिए onPanResponderRelease संपादित:

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}); 
      } 

बैठाना यदि आप अंतिम निर्देशांक चाहते हैं, आप के साथ this.state.currentPanValue