React Native中RefreshContorl下拉刷新教程

我們知道App中都有下拉加載，在React Native中也有類似的控件，本文主要介紹了React Native中的RefreshContorl下拉刷新使用，希望能幫助到大家。

一、屬性方法

（1） onRefresh function 在視圖開始刷新的時候呼叫

（2） refreshing bool 視圖是否在刷新時顯示指示器，也顯示目前是否在刷新中

（3） colors [ColorPropType] android平台適用進行設定載入進去指示器的顏色，至少設定一種，最多可以設定4種

（4） enabled bool android平台適用用來設定下拉刷新功能是否可用

（5）progressBackgroundColor ColorPropType 設定載入進度指示器的背景顏色

#（6）size RefreshLayoutConsts.SIZE .DEFAULT android平台適用載入進度指示器的尺寸大小

（7） tintColor ColorPropType iOS平台適用設定載入進度指示器的顏色

（8）title string iOS平台適用設定載入進度指示器下面的標題文字訊息

二、使用方法

#

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

這樣就出現載入效果了。

相關推薦：

mescroll.js上拉加載下拉刷新元件詳解

dropload.js外掛程式下拉刷新和上拉加載方法

微信小程式清單下拉刷新及上拉載入的實作方法分析

以上是React Native中RefreshContorl下拉刷新教程的詳細內容。更多資訊請關注PHP中文網其他相關文章！