วิธีแสดง ProgressBar ใน React Native

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

การติดตั้ง

ติดตั้งโมดูล react-native-paper ด้วย npm:

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

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

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

ลำดับ	Props & คำอธิบาย
1	progress รับค่าตั้งแต่ 0 ถึง 1 แสดงความคืบหน้าของแถบความคืบหน้า
2	color สีของแถบความคืบหน้า
3	visible ค่า true/false ใช้แสดง/ซ่อน progress bar
4	style สไตล์ที่จะนำไปใช้กับ progress bar

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

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

ค่าเริ่มต้นคือ 0.5 และจะเพิ่มขึ้นจนถึง 1

import * as React from 'react';
import { ProgressBar } from 'react-native-paper';

const MyComponent = () => (
  
);

export default MyComponent;

วิธีแสดง ProgressBar ใน React Native

ค่า progress ควรอยู่ระหว่าง 0 ถึง 1 (ไม่ใช่ 0-10 ตามที่ระบุในต้นฉบับ)
สามารถทำให้ Progress Bar เคลื่อนไหวได้โดยอัปเดตค่า progress ผ่าน state
รองรับโหมด indeterminate (ไม่ระบุความคืบหน้าที่แน่นอน) ด้วย prop indeterminate