প্রতিক্রিয়া নেটিভ এ লোডিং সূচক কীভাবে প্রদর্শন করবেন?

লোডিং ইন্ডিকেটর ব্যবহার করা হয় যখন আমরা ব্যবহারকারীকে বলতে চাই যে তারা UI এ যে অনুরোধ করেছে তাতে সময় লাগবে। যদি ব্যবহারকারী ফর্মটি পূরণ করার পরে সাবমিট বোতামে ক্লিক করেছেন, বা কিছু ডেটা পেতে অনুসন্ধান বোতামে ক্লিক করেছেন৷

ReactNative একটি ActivityIndicator কম্পোনেন্ট অফার করে যার UI এ লোডিং ইন্ডিকেটর দেখানোর বিভিন্ন উপায় রয়েছে।

মৌলিক কার্যকলাপ নির্দেশক উপাদান নিম্নরূপ -

<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}/>

অ্যানিমেটিংটি অ্যানিমেটিং ভেরিয়েবলে সেট করা হয় যা ডিফল্টরূপে সত্যে সেট করা থাকে। ক্লোজঅ্যাক্টিভিটি ইন্ডিকেটর পদ্ধতিটিকে কম্পোনেন্টডিডমাউন্ট() ফাংশনের ভিতরে বলা হয় যা 1 মিনিটের পরে অ্যানিমেটিং অবস্থাকে মিথ্যাতে সেট করবে।

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 (
         <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
   }
})

আউটপুট