रिएक्ट नेटिव में लोडिंग इंडिकेटर कैसे प्रदर्शित करें?

<घंटा/>

लोडिंग इंडिकेटर का उपयोग तब किया जाता है जब हम यूजर को बताना चाहते हैं कि यूआई पर उनके द्वारा किए गए अनुरोध में समय लगेगा। यदि उपयोगकर्ता ने फॉर्म भरने के बाद सबमिट बटन पर क्लिक किया है, या कुछ डेटा प्राप्त करने के लिए खोज बटन पर क्लिक किया है।

ReactNative एक एक्टिविटीइंडिकेटर घटक प्रदान करता है जिसमें UI पर लोडिंग संकेतक दिखाने के विभिन्न तरीके हैं।

मूल गतिविधि संकेतक घटक इस प्रकार है -

एक्टिविटीइंडिकेटर के साथ काम करने के लिए आपको इसे निम्नानुसार आयात करना होगा -

'react-native' से आयात करें { activityIndicator};

गतिविधि संकेतक के पास उपलब्ध कुछ महत्वपूर्ण गुण यहां दिए गए हैं।

<टेबल> <थेड> क्रमांक <थ> प्रॉप्स और विवरण 1 एनिमेट करना
लोडिंग इंडिकेटर को एनिमेट करने के लिए। बूलियन वैल्यू को इंडिकेटर दिखाने के लिए सही और इसे छिपाने के लिए झूठा लगता है।
2 रंग
लोडिंग इंडिकेटर के लिए दिखाया जाने वाला रंग।
3 छुपाएं जब रोका जाए
एनीमेशन नहीं होने पर संकेतक को रोकने के लिए। मान सही/गलत है।
4 आकार
संकेतक का आकार। मान छोटे और बड़े हैं।

उदाहरण:लोडिंग इंडिकेटर का प्रदर्शन

एक्टिविटी इंडिकेटर का उपयोग करके लोडिंग इंडिकेटर हासिल किया जाता है, इसलिए पहले आयात करें -

'react-native' से आयात करें { activityIndicator, View, StyleSheet };

यहां उपयोग किया जाने वाला एक्टिविटीइंडिकेटर घटक है -

एनिमेटिंग को एनिमेटिंग वेरिएबल पर सेट किया जाता है जो डिफ़ॉल्ट रूप से सत्य पर सेट होता है। विधि closeActivityIndicator को कंपोनेंटडिडमाउंट () फ़ंक्शन के अंदर कहा जाता है जो 1 मिनट के बाद एनिमेटिंग स्थिति को गलत पर सेट कर देगा।

state ={animating:true} closeActivityIndicator =() => setTimeout (() => यह। 
 लोडिंग संकेतक प्रदर्शित करने के लिए यहां एक पूर्ण कोड दिया गया है -
 <पूर्व> आयात प्रतिक्रिया, {घटक 'प्रतिक्रिया' से; आयात {गतिविधि संकेतक, दृश्य, स्टाइलशीट} 'प्रतिक्रिया-मूल' से; वर्ग गतिविधि संकेतक उदाहरण घटक का विस्तार करता है {राज्य ={एनिमिंग:सत्य} क्लोजएक्टिविटी इंडिकेटर =() => सेटटाइमआउट (( ) => यह।>   )}}डिफ़ॉल्ट एक्टिविटीइंडिकेटरExampleconst Styles =StyleSheet.create ({कंटेनर:{ flex:निर्यात करें:1, JustifyContent:'center', alignItems:'center', marginTop:70 }, activityIndicator:{flex:1, JustifyContent:'center', alignItems:'center', height:80 }})

आउटपुट

रिएक्ट नेटिव में लोडिंग इंडिकेटर कैसे प्रदर्शित करें?