रिएक्ट नेटिव - एक्टिविटीइंडिएटर
इस अध्याय में हम आपको बताएंगे कि रिएक्ट नेटिव में गतिविधि सूचक का उपयोग कैसे करें।
चरण 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
}
})
जब हम ऐप चलाते हैं, तो हम स्क्रीन पर लोडर देखेंगे। यह छह सेकंड के बाद गायब हो जाएगा।