ProgressBar হল ব্যবহারকারীদের বলার একটি উপায় যে বিষয়বস্তু কিছু সময়ের মধ্যে উপলব্ধ হবে৷ এটি সর্বোত্তমভাবে ব্যবহার করা যেতে পারে যখন আপনি সার্ভারে কিছু জমা দেন এবং সার্ভারের প্রতিক্রিয়ার জন্য অপেক্ষা করেন৷
প্রোগ্রেস বার কম্পোনেন্টের সাথে কাজ করতে npm ব্যবহার করে react-native-paper মডিউল ইনস্টল করুন।
react-native-paper ইনস্টল করার কমান্ড হল −
npm install --save-dev react-native-paper
অগ্রগতি বারের মৌলিক উপাদান নিম্নরূপ-
<ProgressBar progress={progress_number} color="progresscolorbar" />
প্রোগ্রেস বারের সাথে কাজ করার জন্য আপনাকে এটিকে নিম্নরূপ প্রতিক্রিয়া-নেটিভ-পেপার থেকে আমদানি করতে হবে -
import { ProgressBar} from 'react-native-paper';
ProgressBar-
-এ উপলব্ধ কিছু গুরুত্বপূর্ণ বৈশিষ্ট্য নিচে দেওয়া হলSr. No | প্রপস এবং বর্ণনা |
---|---|
1 | প্রগতি এটি 0 থেকে 10 পর্যন্ত মান নেয়। অগ্রগতি বারের ভিতরে দেখানোর জন্য নম্বর মান দিতে হবে। |
2 | রঙ অগ্রগতি বারের রঙ। |
3 | দৃশ্যমান মান সত্য/মিথ্যা। এটা প্রগ্রেসবার দেখাতে/লুকাতে সাহায্য করে। |
4 | স্টাইল প্রগ্রেসবারের জন্য প্রয়োগ করা শৈলী। |
উদাহরণ:অগ্রগতি বারের প্রদর্শন
একটি প্রগ্রেসবার প্রদর্শন করা খুবই সহজ। শুধুমাত্র প্রতিক্রিয়া-নেটিভ-পেপার থেকে এটি প্রথমে আমদানি করুন।
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 = () => ( <ProgressBar style={{ marginTop:200}} progress={0.5} color="#00BCD4" /> ); export default MyComponent;
আউটপুট