Comment afficher la barre de progression dans ReactNative ?

ProgressBar est un moyen d'indiquer à l'utilisateur que le contenu sera disponible à un moment donné. Il est préférable de l'utiliser lorsque vous soumettez du contenu au serveur et que vous attendez que le serveur réponde.

Pour utiliser le composant de barre de progression, veuillez utiliser npm pour installer le module React-native-paper.

La commande pour installer React-native-paper est-

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

La composition de base de la barre de progression est la suivante-

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

Pour utiliser la barre de progression, vous devez l'importer depuis React-native-paper comme indiqué ci-dessous -

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

Voici quelques propriétés importantes disponibles sur ProgressBar -

Sr.No	Props and Description
1	Progress La plage de valeurs est de 0 à 1 0. La valeur à afficher dans la barre de progression.
2	Color La couleur de la barre de progression.
3	visible la valeur est vraie/fausse. Cela aide à afficher/masquer la barre de progression.
4	style Le style appliqué à la barre de progression.

Exemple : Afficher une barre de progression

Afficher une barre de progression est très simple. Importez-le simplement depuis React-Native-paper d'abord.

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

Le code pour afficher la barre de progression est le suivant -

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

La valeur par défaut est de 0,5 et passera à 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;

sortie

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!