React Native中的RefreshContorl下拉刷新使用

更新時間：2017年10月09日 09:39:39 作者：懟碼人生

本篇文章主要介紹了React Native中的RefreshContorl下拉刷新使用，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧

我們知道App中都有下拉加載，在React Native中也有類似的控件

一、屬性方法

（1） onRefresh function 在視圖開始刷新的時候調(diào)用

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

（3） colors [ColorPropType] android平臺適用進行設(shè)置加載進去指示器的顏色，至少設(shè)置一種，最多可以設(shè)置4種

（4） enabled bool android平臺適用用來設(shè)置下拉刷新功能是否可用

（5） progressBackgroundColor ColorPropType 設(shè)置加載進度指示器的背景顏色

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

（7） tintColor ColorPropType iOS平臺適用設(shè)置加載進度指示器的顏色

（8）title string iOS平臺適用設(shè)置加載進度指示器下面的標題文本信息

二、使用方法

<ScrollView
    refreshControl={
     <RefreshControl
      refreshing={this.state.isRefreshing}
      onRefresh={this._onRefresh}
      tintColor="#ff0000"
      title="Loading..."
      titleColor="#00ff00"
      colors={['#ff0000', '#00ff00', '#0000ff']}
      progressBackgroundColor="#ffff00"
     />
    }
/>
 
_onRefresh() {
     this.setState({
       isRefreshing:true
     });
     
     var self = this;
     setTimeout(()=>{
 
      //加載數(shù)據(jù)
     },2000)
}

這樣就出現(xiàn)加載效果了

以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章:

相關(guān)文章

深入研究React中setState源碼
這篇文章主要介紹了深入研究React中setState源碼，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
2017-11-11
React實現(xiàn)數(shù)字滾動組件numbers-scroll的示例詳解
數(shù)字滾動組件，也可以叫數(shù)字輪播組件，這個名字一聽就是非常普通常見的組件。本文將利用React實現(xiàn)這一組件，感興趣的小伙伴可以了解一下
2023-03-03
React跨端動態(tài)化之從JS引擎到RN落地詳解
這篇文章主要為大家介紹了React跨端動態(tài)化之從JS引擎到RN落地，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪
2022-09-09
react 生命周期實例分析
這篇文章主要介紹了react 生命周期,結(jié)合實例形式分析了react 生命周期基本原理、操作步驟與注意事項,需要的朋友可以參考下
2020-05-05
需要避免的五個react的ref錯誤用法
react是一個優(yōu)秀的框架,提供了我們很多的便利,但是在使用的過程中,我們也會遇到很多的問題,其中一個就是ref的使用,以下是我列出的5個使用ref的錯誤用法,并提供了正確的用法,需要的朋友可以參考下
2024-12-12
更強大的React 狀態(tài)管理庫Zustand使用詳解
這篇文章主要為大家介紹了更強大的React 狀態(tài)管理庫Zustand使用詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪
2022-10-10
基于React路由跳轉(zhuǎn)的幾種方式
這篇文章主要介紹了React路由跳轉(zhuǎn)的幾種方式，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教
2022-07-07
30分鐘帶你全面了解React Hooks
Hooks是一種函數(shù)，該函數(shù)允許您從函數(shù)式組件 “勾住(hook into)”React狀態(tài)和生命周期功能。Hooks在類內(nèi)部不起作用 - 它們允許你無需類就使用 React。
2021-05-05
基于React實現(xiàn)無限滾動表格
以文本為例,為了實現(xiàn)無限循環(huán)的視覺效果,我們需要準備兩段相同的文本,并讓第二段文本的頭部銜接在第一段文本的尾部,同時,為兩段文本設(shè)置相同的滾動動畫,本文給大家介紹了基于React實現(xiàn)無限滾動表格,需要的朋友可以參考下
2023-11-11
react-native使用leanclound消息推送的方法
這篇文章主要介紹了react-native使用leanclound消息推送的方法，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
2018-08-08