React Native में लोडिंग इंडिकेटर कैसे प्रदर्शित करें

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

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

बेसिक ActivityIndicator कंपोनेंट इस प्रकार है:

<ActivityIndicator animating = {animating} color = '#bc2b78' size = "large" style = {yourstyle}/>

ActivityIndicator के साथ काम करने के लिए आपको इसे निम्नानुसार इम्पोर्ट करना होगा:

import { ActivityIndicator } from 'react-native';

ActivityIndicator के साथ उपलब्ध कुछ महत्वपूर्ण प्रॉपर्टीज यहां दी गई हैं।

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

लोडिंग इंडिकेटर ActivityIndicator का उपयोग करके प्राप्त किया जाता है, इसलिए पहले इसे इम्पोर्ट करें:

import { ActivityIndicator, View, StyleSheet } from 'react-native';

यहां उपयोग किया गया ActivityIndicator कंपोनेंट है:

<ActivityIndicator
    animating = {animating}
    color = '#bc2b78'
    size = "large"
    style = {styles.activityIndicator}/>

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

state = { animating: true }
closeActivityIndicator = () => setTimeout(() => this.setState({
    animating: false }), 60000)
componentDidMount = () => this.closeActivityIndicator()

लोडिंग इंडिकेटर प्रदर्शित करने का पूरा कोड यहां दिया गया है:

import React, { Component } from 'react';
import { ActivityIndicator, View, StyleSheet } from 'react-native';
class ActivityIndicatorExample extends Component {
    state = { animating: true }
    closeActivityIndicator = () => setTimeout(() => this.setState({
        animating: false }), 60000)
    componentDidMount = () => this.closeActivityIndicator()
    render() {
        const animating = this.state.animating
        return (
            
                
            
        )
    }
}
export default ActivityIndicatorExample
const styles = StyleSheet.create ({
    container: {
        flex: 1,
        justifyContent: 'center',
        alignItems: 'center',
        marginTop: 70
    },
    activityIndicator: {
        flex: 1,
        justifyContent: 'center',
        alignItems: 'center',
        height: 80
    }
})

आउटपुट