मैं जो componentDidMount पर स्लाइड एक कस्टम मॉडल है जब:मूल निवासी प्रतिक्रिया: एनिमेशन घटक unmounts
componentDidMount() {
Animated.timing(this._animatedValue.y, {
duration: 200,
toValue: 0
}).start()
}
ठीक है, यह आसान था। हालांकि, जब घटक अनमाउंट करता है तो मैं मोडल को स्लाइड करना भी पसंद करता हूं। मेरे लिए, componentWillUnmount() सही लगेगा के रूप में यह एक सुंदर कथात्मक तरीका है,:,
componentWillUnmount() {
Animated.timing(this._animatedValue.y, {
duration: 200,
toValue: deviceHeight
}).start()
}
लेकिन इस पाठ्यक्रम नहीं काम का है, क्योंकि इंतजार नहीं करता जब तक मैं अपने एनीमेशन समाप्त कर दिया है प्रतिक्रिया।
तो वर्तमान में मैं एक कस्टम समारोह के साथ इस को हल करने के:
closeModal() {
Animated.timing(this._animatedValue.y, {
duration: C.filterModalDuration,
toValue: deviceHeight
}).start()
InteractionManager.runAfterInteractions(() => {
this.props.UnmountThisComponent()
})
}
इस कोर्स सुरुचिपूर्ण के रूप में नहीं की है, लेकिन यह काम करता है। हालांकि, दर्द शुरू होता है अगर मैं एक घटक से इस समारोह में दूर के घटक पेड़ में नीचे कॉल करने के लिए की जरूरत है, यानी मैं मैन्युअल रूप से नीचे onUnmount={this.props.onUnmount} बार बार साथ onUnmount={()=> closeModal()} के माध्यम से इस समारोह को पारित और फिर ...
फिर जरूरत है मैं सोचा कि मैं इसे Redux & रेडक्स-कनेक्ट के साथ हल कर सकता हूं। मैं बच्चे के घटक है, जो तब componentWillRecieveProps() इस तरह के माध्यम से समारोह कहेंगे से एक redux स्थिति परिवर्तन को गति प्रदान करने में सोच रहा था:
componentWillReceiveProps (nextProps) {
if (nextProps.closeFilter === true) {
this.closeModal()
}
}
हालांकि यह बहुत hacky और जरूरी लगता है।
क्या इस समस्या को एक सुरुचिपूर्ण/घोषणात्मक तरीके से हल करने का कोई तरीका है?
इस पर कोई अपडेट? मैं फिलहाल इसी स्थिति में हूं। यदि कोई अपडेट आपके कोड स्पष्टीकरण को और अधिक विस्तारित नहीं कर सकता है क्योंकि मुझे नहीं पता कि यह इंटरैक्शन मैनेजर आदि क्या है: डी –
मेरी तरफ से कोई अपडेट नहीं। एक एनीमेशन पूरा होने के बाद इंटरैक्शन मैनेजर पहले कॉलबैक निष्पादित करेगा। आप आमतौर पर उस कॉलबैक के अंदर महंगा सिंक्रोनस कार्य डाल देंगे। यदि आप एक ही समय में एनीमेशन और महंगी कार्य निष्पादित करेंगे, तो एनीमेशन जंकी होगा। (जब तक आप एनीमेशन के लिए देशी ड्राइवर का उपयोग नहीं करते हैं जो प्रतिक्रिया मूल के हाल के संस्करणों में जारी किया गया है, जो एक अलग थ्रेड पर एनिमेशन निष्पादित करेगा)। यहां और देखें: https://facebook.github.io/react-native/docs/interactionmanager.html – ThorbenA
क्या आप अपनी प्रोजेक्ट में 'नेविगेटर' का उपयोग कर रहे हैं? इस तरह हम प्रवेश/निकास दृश्यों पर एनिमेशन (संक्रमण में) करते हैं। – Lucas