react native之ScrollView下拉刷新效果

本文实例为大家分享了react native之scrollview下拉刷新效果的具体代码，供大家参考，具体内容如下

scrollview的refreshcontrol属性用于下拉刷新，只能用于垂直视图，即horizontal不能为true。

1.创建自定义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:'初始化数据'+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.模拟加载数据
        settimeout(()=>{
            let newdataarr=array.from(new array(5)).map((value,index)=>({
                title:'我是拉下来的数据'+(this.state.loaded+index)
            })).concat(this.state.rowdataarr);
            //更新状态机
            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.结果如图

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。