रिएक्ट नेटिव के साथ एक प्रगति पट्टी बनाएँ
एक प्रगति पट्टी (कभी-कभी प्रगति संकेतक के रूप में संदर्भित) एक दृश्य संकेतक या किसी विशेष कार्य की प्रगति का प्रतिनिधित्व है। यह एक ऑपरेशन हो सकता है जैसे डाउनलोड, फाइल ट्रांसफर/अपलोड, इंस्टॉलेशन, प्रोग्राम एक्जीक्यूशन या यहां तक कि प्रोफाइल सेटअप में पूरे किए गए स्टेप्स।
अच्छा UX वाला सॉफ़्टवेयर उपयोगकर्ता को यह जानने देता है कि क्या कोई प्रक्रिया चल रही है, अपेक्षित चलने का समय और काम का पूरा हिस्सा।
प्रगति सलाखों को निर्धारित या अनिश्चित किया जा सकता है। निर्धारित प्रगति सलाखों का उपयोग तब किया जाता है जब आप बता सकते हैं कि क्या किया गया है और क्या पूरा करना बाकी है। दुविधा में पड़ा हुआ दूसरी ओर, प्रगति बार का उपयोग तब किया जाता है जब इन मीट्रिक को तुरंत निर्धारित नहीं किया जा सकता है।
इस लेख में, हम देखेंगे कि रिएक्ट नेटिव के लिए प्रगति पट्टी कैसे बनाई जाए। आप पूछ सकते हैं कि आप एक क्यों बनाना चाहते हैं, आखिरकार, प्रगति बार के लिए कुछ रिएक्ट नेटिव पैकेज हैं जैसे कि प्रतिक्रिया देशी-प्रगति-बार-एनिमेटेड तथा प्रतिक्रिया देशी-प्रगति . अंततः, यह संभवतः व्यक्तिगत प्राथमिकताओं पर निर्भर करेगा और कुछ ऐसा तैयार करेगा जिसे आप अपनी आवश्यकताओं को पूरा करने के लिए बदल सकते हैं।
रिएक्ट नेटिव में एक प्रगति पट्टी घटक है |_+_| जो केवल Android के लिए उपलब्ध है। यदि आप चाहते हैं कि आपके आईओएस ऐप में प्रगति पट्टी हो, तो आपको मौजूदा एनपीएम पैकेज का उपयोग करना होगा या स्वयं एक बनाना होगा।
वॉल स्ट्रीट गेम्स टोकन
शुरू करना
यह लेख मानता है कि आप रिएक्ट नेटिव से परिचित हैं या, कम से कम, रिएक्ट। रिएक्ट हुक की समझ की भी आवश्यकता होगी। आरंभ करने के लिए, हमें पहले एक परियोजना शुरू करनी होगी। आप अपने प्रोजेक्ट को बूटस्ट्रैप करने के लिए एक्सपो सीएलआई या रिएक्ट नेटिव सीएलआई का उपयोग कर सकते हैं। इस लेख के प्रयोजनों के लिए, मैं स्नैक का उपयोग करूंगा जो आपको सीधे अपने वेब ब्राउज़र में रिएक्ट नेटिव को आज़माने की अनुमति देता है। अगर आप स्नैक में जाएंगे तो आपको कुछ ऐसा ही नजारा दिखेगा:
www नेटफ्लिक्स/सक्रिय
हम अपने परिवर्तन App.js फ़ाइल में करेंगे। आइए स्पष्ट करें कि हमारे पास पहले से क्या है ताकि हम आरंभ कर सकें। App.js में निम्न कोड जोड़ें:
ProgressBarAndroidहम इसमें कुछ पाठ के साथ एक दृश्य प्रस्तुत कर रहे हैं। डिवाइस सिम्युलेटर को स्वचालित रूप से अपडेट करना चाहिए।
प्रगति पट्टी का निर्माण
इससे पहले कि हम अपनी प्रगति पट्टी बनाना शुरू करें, हमें यह निर्धारित करने की आवश्यकता है कि यह कैसा दिखेगा और हमें क्या दिखाना है। एक साधारण प्रगति पट्टी में कुछ वर्णनात्मक पाठ होगा जैसे लोडिंग, और वास्तविक बार ऑपरेशन की प्रगति का प्रतिनिधित्व करता है। हम कुछ टेक्स्ट भी जोड़ेंगे जो दर्शाता है कि कितने प्रतिशत ऑपरेशन पूरा हो गया है। आइए अपनी प्रगति पट्टी का कंकाल बनाएं। हमारे App.js में, हम अपने टेक्स्ट कंपोनेंट में टेक्स्ट को लोडिंग में बदल देंगे…:
import React, { useEffect, useState, useRef } from 'react'; import { Text, View, StyleSheet } from 'react-native'; import Constants from 'expo-constants'; const App = () => { return ( We Will Start Here ); } export default App; const styles = StyleSheet.create({ container: { flex: 1, justifyContent: 'center', alignItems: 'center', paddingTop: Constants.statusBarHeight, backgroundColor: '#ecf0f1', padding: 8, }, }); हम चाहते हैं कि |_+_|पाठ प्रगति पट्टी के ऊपर हो और प्रतिशत पूर्णता बार के नीचे हो। हमें एक कॉलम में चाइल्ड कंपोनेंट्स को अलाइन करने के लिए कंटेनर स्टाइल को बदलना होगा। आइए एक |_+_| . जोड़ें हमारे कंटेनर शैलियों के लिए संपत्ति। इसके नीचे, हमारे पास 20 पिक्सेल की ऊँचाई, 100% चौड़ाई, एक सफेद पृष्ठभूमि और एक काली सीमा 2 पिक्सेल मोटी के साथ एक खाली दृश्य होगा। आप इन स्टाइल को |_+_| नामक एक नई स्टाइल ऑब्जेक्ट में जोड़ सकते हैं।
Loading..... कार्य निष्पादन की वर्तमान प्रगति को प्रदर्शित करने के लिए, हम प्रगति पट्टी के नीचे प्रतिशत पूर्णता के साथ एक टेक्स्ट फ़ील्ड जोड़ेंगे। हम इसे अभी के लिए 50% पर हार्डकोड कर सकते हैं।
Loading..... यहां बताया गया है कि हमारी प्रगति पट्टी अब तक कैसी दिखनी चाहिए:
अब हम वास्तविक प्रगति पट्टी पर काम करना शुरू कर सकते हैं। हमें एक चाइल्ड व्यू को प्रोग्रेस बार कंटेनर व्यू में जोड़ना होगा। चाइल्ड व्यू प्रगति का प्रतिशत दिखाएगा। चूंकि चाइल्ड व्यू को क्षैतिज तल पर संरेखित करने की आवश्यकता होगी, इसलिए प्रोग्रेस बार कंटेनर को स्टाइलिंग प्रॉपर्टी की आवश्यकता होगी |_+_|। इस गुण को |_+_| . में जोड़ें शैलियाँ। हम अंततः बार को चेतन करना चाहेंगे, इसलिए हम एक एनिमेटेड दृश्य का उपयोग करेंगे।
हमारा एनिमेटेड व्यू |_+_| . का उपयोग करेगा स्थिति निरपेक्ष और शून्य स्थिति के साथ एक ओवरले बनाने के लिए।
flexDirection: 'Column'हमें दृश्य को एक रंग भरने की भी आवश्यकता होगी। आप अपनी पसंद का रंग चुन सकते हैं। मैंने हरे रंग की छाया का उपयोग करना चुना है। आइए दृश्य को 50% की चौड़ाई भी दें।
कनेक्टिंग नेटगियर ac1200 वाईफाई रेंज एक्सटेंडर
progressBarहमारा ऐप अब इस तरह दिखना चाहिए:
प्रगति काउंटर जोड़ना
हमारी प्रगति पट्टी को बदलती पूर्णता दिखाने के लिए, हमें एक काउंटर की आवश्यकता होगी। ऐसा करने का सबसे आसान तरीका |_+_| का उपयोग करना है। हालांकि, मैं हुक का उपयोग कर रहा हूं और |_+_| अपेक्षा के अनुरूप व्यवहार नहीं करता। इस बाधा को दूर करने के लिए, हम डैन अब्रामोव द्वारा बनाए गए एक शानदार कस्टम हुक का उपयोग करेंगे। आप उनके ब्लॉग में पा सकते हैं यहां . आइए आगे बढ़ें और इस कस्टम हुक को कॉपी करें और इसे हमारी App.js फ़ाइल में जोड़ें:
Loading..... const styles = StyleSheet.create({ container: {....}, progressBar: { height: 20, width: '100%', backgroundColor: 'white', borderColor: '#000', borderWidth: 2, borderRadius: 5 } }); अब जबकि हमारे पास यह हुक है, हम आगे बढ़ सकते हैं और इसका उपयोग कर सकते हैं। हमें एक प्रगति स्थिति मान की आवश्यकता होगी और इसे कस्टम हुक का उपयोग करके अपडेट करना होगा। अपने घटक में निम्नलिखित कोड जोड़ें:
फेसबुक सर्च काम नहीं कर रहा 2018
Loading..... 50% हम कस्टम का उपयोग कर रहे हैं |_+_| प्रत्येक 1 सेकंड में 5 की वृद्धि में प्रगति के मान को 0 से 100 तक अपडेट करने के लिए हुक करें।
प्रगति पट्टी को एनिमेट करना
पहली चीज जो हमें करने की आवश्यकता होगी वह है अपना एनिमेटेड मूल्य बनाना। इसे पूरा करने के लिए, हम उपयोग करेंगे उपयोग रेफरी हुक। आइए हमारे एनिमेटेड मूल्य को घटक में जोड़ें:
flexDirection:'Row'जब हमारा प्रगति मूल्य बदलता है, तो हमें |_+_| का उपयोग करके एनिमेशन के माध्यम से अपडेट चलाने की आवश्यकता होगी। यह एनीमेशन रेफरी के वर्तमान मूल्य के साथ-साथ एक कॉन्फ़िगरेशन ऑब्जेक्ट लेगा जिसमें एनिमेट करने के लिए नया मान और एनीमेशन अवधि शामिल होगी। फिर एनीमेशन को स्टार्ट कॉल करके ट्रिगर किया जाएगा। हम उपयोग करेंगे |_+_| एनिमेशन को अपडेट करने की निर्भरता के रूप में प्रगति मूल्य के साथ। कोड में, यह कुछ इस तरह दिखेगा:
progressBarइसके बाद, हमें प्रगति पट्टी के लिए चौड़ाई निर्धारित करने की आवश्यकता होगी। हम एनीमेशन से एक प्रक्षेपित मूल्य बनाकर ऐसा करेंगे।
StyleSheet.absoluteFillमूल्य |_+_|उन मूल्यों की श्रेणी का प्रतिनिधित्व करता है जो हमें प्रगति से प्राप्त होंगे। |_+_| आउटपुट होने वाले मानों की श्रेणी को परिभाषित करता है। एक इंटरपोलेशन मैप इनपुट रेंज से लेकर आउटपुट रेंज तक आमतौर पर एक लीनियर इंटरपोलेशन का उपयोग करता है। डिफ़ॉल्ट रूप से, यह वक्र को दी गई सीमाओं से परे एक्सट्रपलेशन करेगा। यह सुनिश्चित करने के लिए कि आउटपुट मान प्रदान की गई सीमा से आगे नहीं बढ़ते हैं, हम एक संपत्ति एक्सट्रपलेट पास करते हैं: |_+_| कॉन्फ़िगरेशन ऑब्जेक्ट के लिए। अब हम प्रक्षेपित चौड़ाई को एनिमेटेड प्रोग्रेस बार में पास करते हैं।
{ position: 'absolute', left: 0, right: 0, top: 0, bottom: 0 } प्रतिशत प्रगति मान जिसे हमने पहले हार्डकोड किया था उसे अब अद्यतन प्रगति पट्टी से मेल खाना होगा। चूंकि हमारे मान 0 से 100 के बीच हैं, हम टेम्प्लेट स्ट्रिंग का उपयोग करके टेक्स्ट का निर्माण करेंगे।
प्रतिक्रिया-राउटर टैब
एंड देयर वी हैव इट। हमारी प्रगति पट्टी पूरी हो गई है। अंतिम उत्पाद पाया जा सकता है यहां।
निष्कर्ष
आप इस परियोजना के लिए नाश्ता पा सकते हैं यहां . आप इस परियोजना के लिए कोड भी देख सकते हैं GitHub . यह किसी भी तरह से एक संपूर्ण प्रगति पट्टी नहीं है। इसमें कई सुधार हैं जो विशेष रूप से एनीमेशन के संबंध में किए जा सकते हैं। अपने आप को और अधिक चुनौती देने के लिए, आप एक फ़ाइल अपलोड करने और प्रगति प्रदर्शित करने का प्रयास कर सकते हैं।
#प्रतिक्रिया #जावास्क्रिप्ट