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