React Native में ProgressBar कैसे दिखाएं

ProgressBar उपयोगकर्ताओं को यह बताने का एक तरीका है कि कंटेंट कुछ समय में उपलब्ध होगा। इसका सबसे अच्छा उपयोग तब किया जा सकता है जब आप सर्वर को कुछ सबमिट करते हैं और सर्वर के प्रतिक्रिया देने की प्रतीक्षा करते हैं।

प्रोग्रेस बार कंपोनेंट के साथ काम करने के लिए npm का उपयोग करके react-native-paper मॉड्यूल इंस्टॉल करें।

react-native-paper इंस्टॉल करने की कमांड है:

npm install --save-dev react-native-paper

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

<ProgressBar progress={progress_number} color="progresscolorbar" />

Progress Bar के साथ काम करने के लिए आपको इसे react-native-paper से इम्पोर्ट करना होगा:

import { ProgressBar } from 'react-native-paper';

ProgressBar पर उपलब्ध कुछ महत्वपूर्ण प्रॉपर्टीज निम्न हैं:

उदाहरण: प्रोग्रेस बार का प्रदर्शन

प्रोग्रेसबार प्रदर्शित करना बहुत सरल है। बस इसे पहले react-native-paper से इम्पोर्ट करें।

import { ProgressBar } from 'react-native-paper';

प्रोग्रेस बार दिखाने का कोड इस प्रकार है:

<ProgressBar style={{ marginTop:200}} progress={0.5} color="#00BCD4" />

डिफ़ॉल्ट मान 0.5 है और यह 10 तक बढ़ेगा।

import * as React from 'react';
import { ProgressBar } from 'react-native-paper';
const MyComponent = () => (
    
);
export default MyComponent;

आउटपुट