react native之ScrollView下拉刷新效果的示例分析

本篇文章給大家分享的是有關(guān)react native之ScrollView下拉刷新效果的示例分析，小編覺得挺實(shí)用的，因此分享給大家學(xué)習(xí)，希望大家閱讀完這篇文章后可以有所收獲，話不多說，跟著小編一起來看看吧。

ScrollView的refreshControl屬性用于下拉刷新，只能用于垂直視圖，即horizontal不能為true。

1.創(chuàng)建自定義CKRefresh.js刷新組件

import React,{Component} from 'react';
import {
    View,
    Text,
    StyleSheet,
    ScrollView,
    RefreshControl,
    Dimensions
} from 'react-native';

const screenW=Dimensions.get('window').width;

export default class CKRefresh extends Component{
    constructor(){
        super();
        this.state={
            rowDataArr:Array.from(new Array(30)).map((value,index)=>({
                title:'初始化數(shù)據(jù)'+index
            })),
            //是否顯示loading
            isRefreshing:false,
            loaded:0
        }
    }

    render(){
        const rowsArr=this.state.rowDataArr.map((row,index)=>(<Row data={row} key={index}/>))
        return(
            <ScrollView
                refreshControl={
                    <RefreshControl
                        refreshing={this.state.isRefreshing}
                        onRefresh={()=>this._onRefresh()}
                        colors={['red','green','blue']}
                        title="正在加載中..."
                    />
                }
            >
                {rowsArr}
            </ScrollView>
        )
    }

    _onRefresh(){
        //1.顯示指示器
        this.setState({
            isRefreshing:true
        });
        //2.模擬加載數(shù)據(jù)
        setTimeout(()=>{
            let newDataArr=Array.from(new Array(5)).map((value,index)=>({
                title:'我是拉下來的數(shù)據(jù)'+(this.state.loaded+index)
            })).concat(this.state.rowDataArr);
            //更新狀態(tài)機(jī)
            this.setState({
                rowDataArr:newDataArr,
                isRefreshing:false,
                loaded:this.state.loaded+5
            });
        },2000);
    }
}

class Row extends Component{
    static defaultProps={
        data:{}
    };
    render(){
        return(
            <View style={{
                width:screenW,
                height:40,
                borderBottomWidth:1,
                borderBottomColor:'red',
                justifyContent:'center'
            }}>
                <Text>{this.props.data.title}</Text>
            </View>
        )
    }
}

const styles=StyleSheet.create({

})

2.在App.js中引用

/**
 * Sample React Native App
 * https://github.com/facebook/react-native
 *
 * @format
 * @flow strict-local
 */

import React from 'react';
import {
  SafeAreaView,
  StyleSheet,
  ScrollView,
  View,
  Text,
  StatusBar,
} from 'react-native';

import {
  Header,
  LearnMoreLinks,
  Colors,
  DebugInstructions,
  ReloadInstructions,
} from 'react-native/Libraries/NewAppScreen';

import CKRefresh from './components/CKRefresh';
const App: () => React$Node = () => {

  return (
    <>
      <StatusBar barStyle="dark-content" />
      <SafeAreaView style={styles.mainViewStyle}>
      <CKRefresh/>
      </SafeAreaView>
    </>
  );
};


const styles=StyleSheet.create({
  mainViewStyle:{
      flex:1,
      backgroundColor:'#fff',
  }
});



export default App;

3.結(jié)果如圖

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

以上就是react native之ScrollView下拉刷新效果的示例分析，小編相信有部分知識(shí)點(diǎn)可能是我們?nèi)粘９ぷ鲿?huì)見到或用到的。希望你能通過這篇文章學(xué)到更多知識(shí)。更多詳情敬請(qǐng)關(guān)注億速云行業(yè)資訊頻道。