Tutoriel d'actualisation de la liste déroulante RefreshContorl dans React Native

Nous savons qu'il existe un chargement déroulant dans l'application et qu'il existe des contrôles similaires dans React Native. Cet article présente principalement l'utilisation de l'actualisation déroulante RefreshContorl dans React Native. J'espère que cela pourra aider tout le monde.

1. Méthodes d'attribut

(1) la fonction onRefresh est appelée lorsque la vue commence à s'actualiser

(2) booléen rafraîchissant si la vue est rafraîchissant Affiche l'indicateur et indique également s'il est en cours d'actualisation

(3) couleurs [ColorPropType] La plate-forme Android est adaptée pour définir la couleur de l'indicateur chargé. Au moins un type peut être défini, et plus. jusqu'à 4 types peuvent être définis

(4) la plate-forme Android bool activée est utilisée pour définir si la fonction d'actualisation déroulante est disponible

(5) progressBackgroundColor ColorPropType définit la couleur d'arrière-plan du chargement indicateur de progression

(6) size RefreshLayoutConsts.SIZE .DEFAULT La taille de l'indicateur de progression de chargement applicable à la plateforme Android

(7) tintColor ColorPropType Applicable à la plateforme iOS pour définir la couleur de l'indicateur de progression du chargement

(8) chaîne de titre Applicable à la plateforme iOS pour définir la progression du chargement Informations sur le texte du titre sous l'indicateur

2. Comment utiliser

<ScrollView
    refreshControl={
     <RefreshControl
      refreshing={this.state.isRefreshing}
      onRefresh={this._onRefresh}
      tintColor="#ff0000"
      title="Loading..."
      titleColor="#00ff00"
      colors={[&#39;#ff0000&#39;, &#39;#00ff00&#39;, &#39;#0000ff&#39;]}
      progressBackgroundColor="#ffff00"
     />
    }
/>
 
_onRefresh() {
     this.setState({
       isRefreshing:true
     });
     
     var self = this;
     setTimeout(()=>{
 
      //加载数据
     },2000)
}

L'effet de chargement apparaîtra.

Recommandations associées :

Explication détaillée du composant d'actualisation pull-up et pull-down mescroll.js

plug dropload.js -in Méthode d'actualisation déroulante et de chargement pull-up

Analyse de la méthode de mise en œuvre de l'actualisation déroulante et du chargement pull-up de la liste d'applets WeChat

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!