Bagaimana untuk menunjukkan bar kemajuan dalam ReactNative?

ProgressBar ialah satu cara untuk memberitahu pengguna bahawa kandungan akan tersedia pada satu ketika. Ia paling sesuai digunakan apabila anda menghantar kandungan ke pelayan dan menunggu pelayan membalas.

Untuk menggunakan komponen bar kemajuan, sila gunakan npm untuk memasang modul react-native-paper.

Arahan untuk memasang react-native-paper ialah-

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

Komposisi asas bar kemajuan adalah seperti berikut-

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

Untuk menggunakan bar kemajuan, anda perlu mengimportnya daripada react-native-paper seperti yang ditunjukkan di bawah -

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

Berikut adalah Beberapa sifat penting yang terdapat di ProgressBar -

1

Sr.No	Props dan Penerangan
	Sr.No Props and Description
	nilai 10. Nilai yang akan dipaparkan dalam bar kemajuan.
	2Warna Warna bar kemajuan.
	3kelihatan nilai adalah benar/salah. Ia membantu untuk menunjukkan/menyembunyikan bar kemajuan.

4

gaya

Gaya yang digunakan pada bar kemajuan.

🎜🎜Contoh: Memaparkan bar kemajuan 🎜🎜Memaparkan bar kemajuan adalah sangat mudah. Hanya import ia daripada react-native-paper dahulu. 🎜

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

🎜Kod untuk memaparkan bar kemajuan adalah seperti berikut -🎜

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

🎜Nilai lalai ialah 0.5 dan akan meningkat kepada 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;

🎜output🎜🎜🎜🎜

Atas ialah kandungan terperinci Bagaimana untuk menunjukkan bar kemajuan dalam ReactNative?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!