प्रतिक्रियाशील मूल: एनिमेटेड एपीआई का उपयोग करके एक एनिमेटेड इनपुट फ़ील्ड बनाना

सभी को नमस्कार! आज हम आपके साथ संज्ञानात्मक सामग्री साझा कर रहे हैं, जिसका एक अनुवाद विशेष रूप से "रिएक्टज / रिएक्ट नेटिव-डेवलपर" पाठ्यक्रम के छात्रों के लिए तैयार किया गया था।



तो चलिए शुरू करते हैं।

---

हम सभी ने इन इनपुट क्षेत्रों को देखा:



कैप्शन बड़ा है और जब तक आप इनपुट पर ध्यान केंद्रित नहीं करते तब तक एक प्लेसहोल्डर की तरह दिखता है। यह छोटा हो जाएगा और ऊपर उठ जाएगा।

यह बहुत अच्छा लग रहा है। सुचारू रूप से। दोषरहित।

यह भी लगता है कि केवल एक अनुभवी डेवलपर ही ऐसा कर सकता है, है ना?
खैर, शायद रिएक्ट नेटिव के आगमन से पहले ऐसा था, उन दिनों में जब लोग गुफाओं में रहते थे और सभी प्रकार के खेल बनाते थे। लेकिन यह अतीत की बात है।

आप वीडियो देख सकते हैं या पढ़ना जारी रख सकते हैं। यह सब उस पर निर्भर करता है जो आप पसंद करते हैं।

हम क्या हासिल करने की कोशिश कर रहे हैं?

हम जो काम कर रहे हैं, उसके लिए दो विकल्प हैं।
पहला यह है कि इनपुट क्षेत्र पर कोई फोकस नहीं है।



इनपुट फ़ील्ड के अंदर एक शिलालेख दिखाई देता है, और इसका आकार टेक्स्ट फ़ील्ड के आकार के बराबर होता है। रंग सुस्त है। यह placeholder संपत्ति के समान है।

और दूसरा विकल्प, जब इनपुट क्षेत्र पर ध्यान दिया जाता है।



शिलालेख इनपुट क्षेत्र के ऊपर दिखाई देता है, इसका आकार छोटा है, और रंग दर्ज किए गए पाठ के रंग से अलग है।

सबसे सरल कार्यान्वयन

अंत में हम काम कर सकते हैं। अब तक बिना किसी एनिमेशन के।
जैसा कि यह पता चला है, हमारे पास दो यूआई राज्य हैं:

1. क्षेत्र और क्षेत्र के अंदर शिलालेख पर कोई ध्यान नहीं है।
2. क्षेत्र पर ध्यान केंद्रित है, इनपुट क्षेत्र के ऊपर एक शिलालेख है।

वास्तव में, हम इस स्थिति को संग्रहीत कर सकते हैं कि क्या क्षेत्र पर ध्यान केंद्रित है या नहीं। फिर, इस स्थिति के आधार पर, हम यह चुन सकते हैं कि शिलालेख कहां लगाया जाए और उस पर क्या शैली लागू की जाए।

चूंकि शिलालेख अलग-अलग जगहों पर होना चाहिए, और हम इसे घटकों के स्थान को प्रभावित नहीं करना चाहते हैं, हम इसे बिल्कुल स्थिति देंगे। यह सुनिश्चित करने के लिए कि इसके लिए पर्याप्त जगह है, आपको ऊपर से रैपिंग दृश्य में एक इंडेंटेशन जोड़ना होगा।

 class FloatingLabelInput extends Component { state = { isFocused: false, }; handleFocus = () => this.setState({ isFocused: true }); handleBlur = () => this.setState({ isFocused: false }); render() { const { label, ...props } = this.props; const { isFocused } = this.state; const labelStyle = { position: 'absolute', left: 0, top: !isFocused ? 18 : 0, fontSize: !isFocused ? 20 : 14, color: !isFocused ? '#aaa' : '#000', }; return ( <View style={{ paddingTop: 18 }}> <Text style={labelStyle}> {label} </Text> <TextInput {...props} style={{ height: 26, fontSize: 20, color: '#000', borderBottomWidth: 1, borderBottomColor: '#555' }} onFocus={this.handleFocus} onBlur={this.handleBlur} /> </View> ); } } 

 <FloatingLabelInput label="Email" value={this.state.value} onChange={this.handleTextChange} /> 

पिछले चरणों के बाद, हम निम्नलिखित प्राप्त कर सकते हैं:

https://snack.expo.io/Sk006AbdW?session_id=snack-session-JRMksbYK3

और यह एक अच्छा शुरुआती बिंदु है। अब तक हमारे पास कोई एनिमेशन नहीं है, लेकिन हम पहले से ही शिलालेख के स्थान को बदल सकते हैं, जहां ध्यान केंद्रित किया गया है।

क्यों नहीं एक placeholder उपयोग करें?

बेशक, प्लेसहोल्डर की TextInput संपत्ति का उपयोग करना आकर्षक लगता है। हालांकि, यह काम नहीं करेगा, क्योंकि हम यह नियंत्रित करना चाहते हैं कि कैसे, कब और कहां शिलालेख प्रदर्शित किया जाए।

इसके बजाय, हम चाहते हैं कि लेबल उस पर ध्यान केंद्रित करते समय पाठ बॉक्स के अंदर हो। और हम चाहते हैं कि जब इनपुट क्षेत्र पर ध्यान केंद्रित किया जाए तो हम इसे आगे बढ़ाएं, और यह तभी हासिल किया जा सकता है जब हम एक ही तत्व के साथ काम करें।

एनीमेशन के बारे में कैसे?

वास्तव में सबसे आसान हिस्सा रहा।

चूंकि हमारे पास दो राज्य हैं जिनमें एक शिलालेख हो सकता है, और हम फोकस के आधार पर एक का चयन करते हैं, और राज्यों के बीच इस संक्रमण का एनीमेशन काफी तुच्छ है।

इस गाइड से, हम निम्नलिखित पर प्रकाश डाल सकते हैं:

• Animated.Value का अर्थ होगा कि क्षेत्र पर ध्यान केंद्रित करना है (1) या नहीं (0);
• हम धीरे-धीरे और (0) अन्यथा ध्यान केंद्रित करते हुए संख्या को (1) में बदल देंगे;
• इस संख्या के रूप में, हम शिलालेख की शैली को प्रतिबिंबित करेंगे: (0) और (1) में हम शैलियों को परिभाषित करेंगे, और रिएक्ट नेटिव स्वचालित रूप से मध्यवर्ती शैलियों की गणना और लागू करेगा। और रंग भी।

यह सब लागू करना मुश्किल नहीं है।

Animated.Value हमें घटकविलीमाउंट में आरंभ करने की आवश्यकता होगी।

 componentWillMount() { this._animatedIsFocused = new Animated.Value(0); } 

फिर, चूंकि इस संख्या का मान इनपुट क्षेत्र पर केंद्रित है या नहीं इस पर आधारित होना चाहिए, और चूंकि हमारे पास पहले से ही इस स्थिति की जानकारी है, इसलिए हम this.state फ़ंक्शन जोड़ सकते हैं, जो इस संख्या पर निर्भर करता है:

 componentDidUpdate() { Animated.timing(this._animatedIsFocused, { toValue: this.state.isFocused ? 1 : 0, duration: 200, }).start(); } 

अब, ऐसे शब्दों में शिलालेख की शैली को प्रतिबिंबित करने के लिए, हमें केवल दो बदलाव करने की आवश्यकता है:

Animated.Text बदलें। Animated.Text ।

शैलियों को परिभाषित करने के लिए शर्तों का उपयोग करने के बजाय, उन्हें निम्नानुसार परिभाषित करें:

 const labelStyle = { position: 'absolute', left: 0, top: this._animatedIsFocused.interpolate({ inputRange: [0, 1], outputRange: [18, 0], }), fontSize: this._animatedIsFocused.interpolate({ inputRange: [0, 1], outputRange: [20, 14], }), color: this._animatedIsFocused.interpolate({ inputRange: [0, 1], outputRange: ['#aaa', '#000'], }), }; 

https://snack.expo.io/Hk8VCR-dZ?session_id=snack-session-AJ4vulSVw

एक बात और

यदि ऊपर के डेमो में आप कुछ दर्ज करने की कोशिश करते हैं, और फिर इनपुट क्षेत्र से ध्यान हटा दें, तो आपको कुछ अजीब दिखाई देगा।



सौभाग्य से, यह तय करना बहुत आसान है। हमें कोड में केवल दो पंक्तियों को बदलना होगा।

हम यह जांचना चाहते हैं कि इनपुट फ़ील्ड खाली है या नहीं और राज्य को "अनफोकस्ड" में बदल दें, केवल तभी जब दोनों निम्न स्थितियाँ सत्य हों:

• इनपुट फ़ील्ड खाली है;
• मैदान पर कोई फोकस नहीं है।

अन्यथा, हम चाहते हैं कि "केंद्रित" शैली लागू हो और ऊपर जाने के लिए प्रतिस्थापन कैप्शन।

अब जब हम इनपुट फ़ील्ड की स्थिति पर नज़र रख रहे हैं, तो हम आसानी से this.props मान का उपयोग कर सकते हैं।



https://snack.expo.io/ByZBAC-dZ?session_id=snack-session-YNZSqhqOC


वह सब है। मुफ्त वेबिनार पर मिलते हैं ।