react native Expo完全基于ScrollView实现的下拉刷新和上拉触底加载

我直接封装成了一个组件

props参数为

static propTypes = {
        style:PropTypes.object, // 样式
        refreshing:PropTypes.bool.isRequired,//是否开始下拉刷新动画
        refreshBegin: PropTypes.func,// 开始下拉刷新回调
        scrollEnd: PropTypes.func,// 触底回调
    };

使用示例

import React from ‘react‘;
import {
    View,
} from ‘react-native‘;
import styles from ‘./style‘;
import HomeSwiper from "../../../components/HomeSwiper";
import HomeVideo from "../../../components/HomeVideo";
import ScrollViewPull from "../../../components/ScrollViewPull";
import {connect} from ‘react-redux‘; // 引入connect函数
import {
    getHomeSwiper,
    getHomeVideoCard,
    handleRefreshStatus
} from ‘../../../actions/homeRecommendAction‘;

class HomeRecommend extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            refreshing: false,
        };
    }

    componentDidMount(){
        const {homeVideoCard} = this.props;
        this.props.getVideoCard(undefined,1,homeVideoCard);
        this.props.getSwiper();
    }

    // 触底
    handleScrollEnd = () => {
        const {currentPage,lastPage,homeVideoCard} = this.props;
        if(currentPage === lastPage){
            this.props.getVideoCard(undefined,currentPage+1,homeVideoCard);
        }
    };

    // 开始下拉刷新
    handleRefreshBegin = () => {
        const {homeVideoCard} = this.props;
        this.props.getChangeRefresh(true);
        this.props.getSwiper();
        this.props.getVideoCard(undefined,1,homeVideoCard);
    };

    render() {
        const {navigation,swiperData,leftVideoData,rightVideoData,refreshing} = this.props;
        return (
            <ScrollViewPull
                style={styles.scroll}
                refreshing={refreshing}
                scrollEnd={()=>this.handleScrollEnd()} // 触底回调
                refreshBegin={()=>this.handleRefreshBegin()} // 开始下拉刷新回调
            >
                <View style={styles.container}>
                    <HomeSwiper
                        navigation={navigation}
                        swiperData={swiperData}
                    />
                    <View style={styles.border}/>
                    <HomeVideo
                        navigation={navigation}
                        leftVideoData={leftVideoData}
                        rightVideoData={rightVideoData}
                    />
                </View>
            </ScrollViewPull>
        );
    }
}

const mapStateToProps = (state) => ({
    swiperData : state.homeRecommend.homeSwiperData,
    currentPage : state.homeRecommend.currentPage,
    homeVideoCard: state.homeRecommend.homeVideoCard,
    leftVideoData : state.homeRecommend.leftVideoData,
    rightVideoData : state.homeRecommend.rightVideoData,
    refreshing: state.homeRecommend.refreshing
});

const mapDispatchToProps = (dispatch) => ({
    getSwiper(){
        dispatch(getHomeSwiper());
    },
    getChangeRefresh(refresh){
        dispatch(handleRefreshStatus(refresh));
    },
    getVideoCard(id,page,homeVideoCard){
        dispatch(getHomeVideoCard(id,page,homeVideoCard));
    },
});

export default connect(mapStateToProps,mapDispatchToProps)(HomeRecommend);

组件全部代码为:

import React from ‘react‘;
import {
    ScrollView,
    RefreshControl,
} from ‘react-native‘;
import PropTypes from ‘prop-types‘;

class ScrollViewPull extends React.Component {
    static navigationOptions = {
        header: null,
    };

    static propTypes = {
        style:PropTypes.object, // 样式
        refreshing:PropTypes.bool.isRequired,//是否开始下拉刷新动画
        refreshBegin: PropTypes.func,// 开始下拉刷新回调
        scrollEnd: PropTypes.func,// 触底回调
    };

    constructor(props) {
        super(props);
        this.initState();
    }

    initState=()=>{

    };

    onRefresh = () => {
        this.props.refreshBegin();
    };

    // 监听上拉触底
    _contentViewScroll = (e: Object) => {
        let offsetY = e.nativeEvent.contentOffset.y; //滑动距离
        let contentSizeHeight = e.nativeEvent.contentSize.height; //scrollView contentSize高度
        let oriageScrollHeight = e.nativeEvent.layoutMeasurement.height; //scrollView高度
        if (offsetY + oriageScrollHeight >= contentSizeHeight){
            this.props.scrollEnd();
        }
    };

    render() {
        const {children,refreshing,style} = this.props;
        return (
            <ScrollView
                style={[{flex:1},style]}
                showsVerticalScrollIndicator={false}
                scrollToIndex
                refreshControl={
                    <RefreshControl
                        refreshing={refreshing}
                        onRefresh={this.onRefresh}
                    />
                }
                onMomentumScrollEnd = {this._contentViewScroll}
            >
                {children}
            </ScrollView>
        );
    }
}

export default ScrollViewPull;

  

原文地址:https://www.cnblogs.com/piaobodewu/p/10693502.html

时间: 2024-10-17 11:10:39

react native Expo完全基于ScrollView实现的下拉刷新和上拉触底加载的相关文章

不借助第三方插件利用ScrollView自身delegate实现下拉刷新和上拉加载

下拉刷新功能基本上在所有的app中都会被用到,而且这个功能已经被apple集成进去了,不过必须得是在tableViewController中才有,是一个叫做UIRefreshControl的控件,想看效果可以看手机QQ上面联系人列表下拉后的刷新.这里不多介绍. 本篇blog主要介绍如何在scrollview中实现下拉刷新的效果.因为有些时候我们可能更多地希望直接在scrollview中展现,而不是一定要局限于tableviewcontroller. 当然网上有很多下拉刷新和上拉加载的第三方控件,

Android实现下拉刷新和上拉加载更多的RecyclerView和ScrollView

PullRefreshRecyclerView.java /** * 类说明:下拉刷新上拉加载更多的RecyclerView * Author: gaobaiq * Date: 2016/5/9 18:09 */ public class PullRefreshRecyclerView extends PullRefreshView { /** * 内置的RecyclerView: */ private RecyclerView mRecyclerView; /** * 可见的最后一个item

Android ScrollView和ListView联用,且ListView可以下拉刷新和上拉加载

ScrollView嵌套listView且ListView可以实现上拉加载. 由于代码太长,在此只提供实现思路: 先不说上拉加载的事,咱们先回想一下,ScrollView和LsitView联用,时的解决方案.1.禁用ListView的上下滑动,2.计算ListView每一项的高度,3.自定义ListView.列出后发现每一种方案基本上都是把ListView的滑动禁用掉了,如果把ListView的上下滑动禁用掉了何来上拉加载和下拉刷新之说,由此我们得出结论,如果想实现ScrollView和List

Android实战简易教程-第二十五枪(基于Baas的数据表查询下拉刷新和上拉加载实现!)

上一节我们实现了数据表的加载,但是,当数据表数据很多时,我们就要考虑数据的分页,这里我们选用了PullToRefreshListView控件,先看一下该控件的说明: 效果图:                                 正在刷新                                                                       刷新后        一.导入Library 下载源码后(https://github.com/chrisba

react native 0.56.0版本在windows下有bug不能正常运行

react native的0.56.0版本在windows下有bug不能正常运行请init 0.55.4的版本 react-native init MyApp --version 0.55.4 注意version前是两个杠 原文地址:https://www.cnblogs.com/fancing/p/9520786.html

React的React Native

React无疑是今年最火的前端框架,github上的star直逼30,000,基于React的React Native的star也直逼20,000.有了React,组件化似乎不再步履蹒跚,有了React Native,前端的边界似乎广阔无边.而Webpack凭借它异步加载和可分离打包等优秀的特性,走在取代Grunt和Gulp的路上.而面向未来的ES6,模块化的支持似乎已成定局. 我们现在就可以打造自己的Webpack+React+ES6环境并且开始探索起来. 这篇文章就给还没走在这条路上的前端一

React Native——组件FlatList

属性 添加头部组件 ListHeaderComponent属性用来给FlatList添加头部组件 简单使用: //ES6之前写法 _header = function () { return ( <Text style={{fontWeight: 'bold', fontSize: 20}}>热门电影</Text> ); } <FlatList ListHeaderComponent={this._header}//header头部组件 /> 添加尾部组件 ListFo

Android PullToRefresh 下拉刷新,上拉很多其它,支持ScrollView,ListView,可方便拓展GridView,WebView等

在写着东西之前.从网上找到非常多这方面的源代码,可是基本没有找到惬意的.包含在GitHub上的比較有名的Android-PullToRefresh-master.思来想去还是自己写吧.当然当中借鉴了一些别的开源代码! 废话不多说,直接上代码.凝视非常全乎,应该不难理解,Demo下载地址在最后: package com.zs.pulltorefreshtest; import android.content.Context; import android.util.AttributeSet; im

Android PullToRefresh 下拉刷新,上拉更多,支持ScrollView,ListView,可方便拓展GridView,WebView等

在写着东西之前,从网上找到很多这方面的源码,但是基本没有找到满意的,包括在GitHub上的比较有名的Android-PullToRefresh-master,思来想去还是自己写吧,当然其中借鉴了一些别的开源代码! 废话不多说,直接上代码,注释很全乎,应该不难理解,Demo下载地址在最后: package com.zs.pulltorefreshtest; import android.content.Context; import android.util.AttributeSet; impor