ProgressBar là một cách để thông báo cho người dùng biết rằng nội dung đó sẽ có sẵn trong một lúc nào đó. Nó có thể được sử dụng tốt nhất khi bạn gửi nội dung nào đó đến máy chủ và đợi máy chủ phản hồi.
Để làm việc với thành phần thanh tiến trình, hãy cài đặt mô-đun react-native-paper bằng npm.
Lệnh cài đặt react-native-paper là -
npm install --save-dev react-native-paper
Thành phần cơ bản của thanh tiến trình như sau−
<ProgressBar progress={progress_number} color="progresscolorbar" /> Để làm việc với Thanh tiến trình, bạn cần nhập nó từ react-native-paper như sau -
import { ProgressBar} from 'react-native-paper'; Sau đây là một số thuộc tính quan trọng có sẵn trên ProgressBar -
| Sr.No | Đạo cụ &Mô tả |
|---|---|
| 1 | tiến trình Nó có giá trị từ 0 đến 10. Giá trị số được cung cấp để hiển thị bên trong thanh tiến trình. |
| 2 | màu Màu của thanh tiến trình. |
| 3 | hiển thị Các giá trị là true / false. Nó giúp hiển thị / ẩn thanh tiến trình. |
| 4 | phong cách Kiểu được áp dụng cho thanh tiến trình. |
Ví dụ:Hiển thị thanh tiến trình
Nó rất đơn giản để hiển thị một thanh tiến trình. Chỉ cần nhập nó trước từ react-native-paper.
import { ProgressBar} from 'react-native-paper'; Hiển thị một thanh tiến trình có mã như sau -
<ProgressBar style={{ marginTop:200}} progress={0.5} color="#00BCD4" /> Giá trị mặc định là 0,5 và nó sẽ tăng lên đến 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; Đầu ra
