จะแสดง ProgressBar ใน ReactNative ได้อย่างไร

ProgressBar เป็นวิธีบอกผู้ใช้ว่าเนื้อหาจะพร้อมใช้งานในบางครั้ง ใช้ได้ดีที่สุดเมื่อคุณส่งข้อมูลไปยังเซิร์ฟเวอร์และรอให้เซิร์ฟเวอร์ตอบกลับ

ในการทำงานกับส่วนประกอบแถบความคืบหน้า ให้ติดตั้งโมดูล react-native-paper โดยใช้ npm

คำสั่งในการติดตั้ง 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 = () => (
   <ProgressBar style={{ marginTop:200}} progress={0.5} color="#00BCD4" />
);
export default MyComponent;

ผลลัพธ์