रिएक्ट नेटिव - एक्टिविटीइंडिएटर

इस अध्याय में हम आपको बताएंगे कि रिएक्ट नेटिव में गतिविधि सूचक का उपयोग कैसे करें।

चरण 1: ऐप

App हमारे आयात और दिखाने के लिए घटक का उपयोग किया जाएगा ActivityIndicator

App.js

import React from 'react'
import ActivityIndicatorExample from './activity_indicator_example.js'

const Home = () => {
   return (
      <ActivityIndicatorExample />
   )
}
export default Home

चरण 2: ActivIndicatorExample

एनिमेटेड संपत्ति एक बूलियन है जिसका उपयोग गतिविधि संकेतक दिखाने के लिए किया जाता है। घटक माउंट होने के बाद छह सेकंड बाद बंद हो जाता है। यह प्रयोग किया जाता हैcloseActivityIndicator() समारोह।

activity_indicator_example.js

import React, { Component } from 'react';
import { ActivityIndicator, View, Text, TouchableOpacity, 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 (
         <View style = {styles.container}>
            <ActivityIndicator
               animating = {animating}
               color = '#bc2b78'
               size = "large"
               style = {styles.activityIndicator}/>
         </View>
      )
   }
}
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
   }
})

जब हम ऐप चलाते हैं, तो हम स्क्रीन पर लोडर देखेंगे। यह छह सेकंड के बाद गायब हो जाएगा।