RefreshContorl drop-down refresh tutorial in React Native

We know that there are drop-down loading in App, and there are similar controls in React Native. This article mainly introduces the use of RefreshContorl pull-down refresh in React Native. I hope it can help everyone.

1. Attribute methods

(1) onRefresh function is called when the view starts to refresh

(2) refreshing bool whether the view is refreshing Display the indicator, and also indicate whether it is currently being refreshed

(3) colors [ColorPropType] The android platform is suitable for setting the color of the loaded indicator, at least one can be set, and up to 4 can be set

(4) enabled bool android platform is used to set whether the pull-down refresh function is available

(5) progressBackgroundColor ColorPropType sets the background color of the loading progress indicator

(6) size RefreshLayoutConsts.SIZE .DEFAULT The size of the loading progress indicator applicable to the android platform

(7) tintColor ColorPropType Applicable to the iOS platform to set the color of the loading progress indicator

(8) title string Applicable to the iOS platform to set the loading progress The title text information under the indicator

2. How to use

<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)
}

The loading effect will appear.

Related recommendations:

mescroll.js pull-up loading pull-down refresh component detailed explanation

##dropload.js plug-in pull-down refresh and pull-up loading Method

Analysis of implementation method of pull-down refresh and pull-up loading of WeChat applet list

The above is the detailed content of RefreshContorl drop-down refresh tutorial in React Native. For more information, please follow other related articles on the PHP Chinese website!