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 視圖是否在刷新時顯示指示器，也表明當(dāng)前是否在刷新中
（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è)置加載進度指示器下面的標(biāo)題文本信息
二、使用方法
<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 Antd中如何設(shè)置表單只輸入數(shù)字
這篇文章主要介紹了React Antd中如何設(shè)置表單只輸入數(shù)字問題，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2023-06-06
flouting?ui定位組件完美替代ant?deisgn使用詳解
這篇文章主要為大家介紹了flouting?ui定位組件完美替代ant?deisgn使用詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2022-11-11
這篇文章主要為大家詳細介紹了如何基于React封裝一個層次模糊效果的容器組件,文中的示例代碼講解詳細,感興趣的小伙伴可以跟隨小編一起學(xué)習(xí)一下2024-03-03
在React應(yīng)用中，為了讓數(shù)據(jù)在組件間共享，常見的方式是讓它們以props的形式自頂向下傳遞，如果數(shù)據(jù)要在組件樹不同層級共享，那么這些數(shù)據(jù)必須逐層傳遞直到目的地，Context如同管道，它將數(shù)據(jù)從入口直接傳遞到出口，使用Context能避免“prop-drilling”2023-06-06
在現(xiàn)代的Web應(yīng)用程序中,獲取用戶的地理位置信息是一項常見的需求,本文我們將介紹如何在React應(yīng)用程序中簡便地獲取用戶的經(jīng)緯度信息,需要的可以參考下2023-11-11
這篇文章主要介紹了react如何獲取state的值并更新使用，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-08-08
React類組件中super()和super(props)的區(qū)別詳解
這篇文章給大家詳細介紹了React類組件中super()和super(props)有什么區(qū)別,文中通過代碼示例給大家介紹的非常詳細,對大家的學(xué)習(xí)或工作有一定的幫助,需要的朋友可以參考下2024-01-01
雖然一直有做react相關(guān)的優(yōu)化,按需加載、dll 分離、服務(wù)端渲染,但是從來沒有從路由代碼分割這一塊入手過,所以下面這篇文章主要給大家介紹了關(guān)于React中代碼分割的方式,需要的朋友可以參考下2022-12-12
ForwardRef?useImperativeHandle方法demo
這篇文章主要為大家介紹了ForwardRef?useImperativeHandle方法demo，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2023-03-03
這篇文章主要介紹了使用Redux處理異步問題,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2024-03-03