Contenu du cours
Fondations de React Native
Fondations de React Native
Composant ActivityIndicator
Théorie
Le composant ActivityIndicator
est utilisé pour indiquer qu'une tâche est en cours, fournissant un retour visuel à l'utilisateur. Il apparaît généralement sous la forme d'une roue tournante ou d'un autre indicateur animé pour indiquer que l'application est occupée à effectuer une opération.
Pourquoi en avons-nous besoin ?
Indique que l'application travaille sur une tâche, empêchant l'utilisateur de supposer que l'application a gelé.
Comment travailler avec ActivityIndicator
L'
ActivityIndicator
est simple à utiliser et ne nécessite pas de gestion d'état;Nous pouvons contrôler sa visibilité en le rendant conditionnellement en fonction de l'état d'une tâche.
Exemple
Explication
Initialement, le composant affiche un message de bienvenue en utilisant le composant
Text
et un bouton en utilisant le composantTouchableOpacity
;Lorsque le bouton est pressé, la fonction
fetchData
est appelée, ce qui définitisLoading
àtrue
pour afficher leActivityIndicator
;Après un délai de 3 secondes (simulant la récupération de données), la fonction
fetchData
remetisLoading
àfalse
et met à jour l'étatadditionalData
avec du texte;Le
ActivityIndicator
est affiché tant queisLoading
esttrue
, et une fois queisLoading
devientfalse
, leadditionalData
est affiché en utilisant le composantText
.
Résultat
En Pratique
Merci pour vos commentaires !