Comment afficher l'indicateur de chargement dans React Native ?

Utilisez des indicateurs de chargement lorsque nous voulons indiquer à l'utilisateur qu'une requête qu'il fait sur l'interface utilisateur prendra du temps. Si l'utilisateur clique sur le bouton Soumettre après avoir rempli le formulaire, ou clique sur le bouton de recherche pour obtenir des données.

ReactNative fournit un composant ActivityIndicator, qui peut afficher les indicateurs de chargement sur l'interface utilisateur de différentes manières

Le composant de base ActivityIndicator est le suivant -

<ActivityIndicator animating = {animating} color = &#39;#bc2b78&#39; size = "large"
style = {yourstyle}/>

Pour utiliser ActivityIndicator, vous devez appuyer sur Importer comme suit -

import { ActivityIndicator} from 'react-native';

Suivant. sont quelques propriétés importantes fournies par ActivityIndicator.

Sr.No	Accessoires et instructions
1	Animation p> Animation pour l'indicateur de chargement. ça prend une valeur booléenne true pour afficher l'indicateur, false pour masquer l'indicateur.
2	Color p> La couleur affichée par l'indicateur de chargement.
3	hidesWhenStopped S'arrête lorsque l'indicateur n'a pas d'animation. Sa valeur est Vrai/Faux.
4	Taille Indicateur de taille. Les valeurs vont de petite à grande.

Exemple : Affichage de l'indicateur de chargement

L'indicateur de chargement est implémenté à l'aide d'ActivityIndic​​cator, donc d'abord importer-

import { ActivityIndicator, View, StyleSheet } from 'react-native';

C'est le composant ActivityIndic​​cator utilisé-

<ActivityIndicator
   animating = {animating}
   color = &#39;#bc2b78&#39;
   size = "large"
style = {styles.activityIndicator}/>

L'animation est définie à la variable Animation, définie sur true par défaut. Appelez la méthode closeActivityIndicator dans la fonction composantDidMount(), qui définira l'état de l'animation sur false après 1 minute.

state = { animating: true }
   closeActivityIndicator = () => setTimeout(() => this.setState({
   animating: false }), 60000)
   componentDidMount = () => this.closeActivityIndicator()

Ceci est le code complet pour afficher l'indicateur de chargement -

import React, { Component } from 'react';
import { ActivityIndicator, View, StyleSheet } from 'react-native';
class ActivityIndicatorExample extends Component {
   state = { animating: true }
   closeActivityIndicator = () => setTimeout(() => this.setState({
   animating: false }), 60000)
   componentDidMount = () => this.closeActivityIndicator()
   render() {
      const animating = this.state.animating
      return (
         
            
         
      )
   }
}
export default ActivityIndicatorExample
const styles = StyleSheet.create ({
   container: {
      flex: 1,
      justifyContent: 'center',
      alignItems: 'center',
      marginTop: 70
   },
   activityIndicator: {
      flex: 1,
      justifyContent: 'center',
      alignItems: 'center',
      height: 80
   }
})

output

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!