Tutorial React Native Activity Indicator in Hindi #13

Namaste aur swagat hai aapka React Native Tutorial mein. Aaj hum baat karenge Activity Indicator ke baare mein. Activity Indicator React Native mein ek pre-built component hai jo users ko pata chalta hai ki app ka background mein koi activity chal rahi hai jaise data loading ya processing. Is tutorial mein main aapko step-by-step guide karunga ki kaise Activity Indicator ka istemal kiya ja sakta hai React Native mein.

Step 1: Activity Indicator Library Install Karein
Sabse pehle aapko Activity Indicator library install karni hogi. Yeh React Native mein built-in component hai isliye aapko kisi library ko download karne ki zarurat nahi hai.

Step 2: Activity Indicator Ka Istemal Karein
Activity Indicator ka istemal karna bahut hi simple hai. Aap use ek component ke roop mein apne code mein add kar sakte hain jaise niche dikhaya gaya hai:

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

export default class MyActivityIndicator extends Component {
  render() {
    return (
      <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
        <ActivityIndicator size="large" color="#0000ff" />
      </View>
    );
  }
}

Yahan pe ActivityIndicator component ko ek View ke andar include kiya gaya hai jiska style flex: 1, justifyContent: ‘center’, alignItems: ‘center’ hai. Isse Activity Indicator screen ke center mein show hoga.

Step 3: Additional Props Ka Istemal Karein
ActivityIndicator component ke kuch aur props bhi hote hain jinhe customize karke Activity Indicator ko adjust kiya ja sakta hai. Niche kuch example props diye gaye hain:

• color: Activity Indicator ka color set karne ke liye.
• size: Activity Indicator ka size set karne ke liye.
• animating: Activity Indicator chal raha hai ya nahi yeh set karne ke liye.
• hidesWhenStopped: Activity Indicator ko hide karne ke liye jab wo stop ho jaata hai.

Step 4: Activity Indicator Ko Control Karein
ActivityIndicator ko start, stop ya hide karne ke liye aap setState ka use kar sakte hain. Niche ek simple example diya gaya hai jisme Activity Indicator ko state ke through control kiya gaya hai:

import React, { Component } from 'react';
import { View, ActivityIndicator, Button } from 'react-native';

export default class MyActivityIndicatorControl extends Component {
  constructor(props) {
    super(props);
    this.state = {
      loading: false
    };
  }

  render() {
    return (
      <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
        {this.state.loading ? <ActivityIndicator size="large" color="#0000ff" /> : <Button title="Start Loading" onPress={() => this.setState({ loading: true })} />
      </View>
    );
  }
}

Is code mein ek button bhi diya gaya hai jiske through aap Activity Indicator ko start kar sakte hain.

Umeed hai ki yeh tutorial aapko samajhne mein madadgi hui hogi. Activity Indicator ek bahut hi useful component hai jo users ko app ki background activity ke baare mein inform karta hai. Agar aapko koi sawaal ya sujhav ho toh hume comments mein likh kar batayein. Dhanyavad.