React Native（下拉刷新，加载更多）超简单实现！

来源：互联网发布：abbplc编程软件序列号编辑：程序博客网时间：2024/06/05 06:50

我们直接进入我们今天的主题了.我们先看一下今天要实现的效果：

这里写图片描述

我们下拉的时候显示“下拉刷新状态“，当滑动到底部的时候自动显示“加载更多“。

思路：
1、下拉刷新我们直接使用rn自带的RefreshControl。
2、当我们滑动到scrollview或者listview的最底部的时候，开始显示进度条，然后加载更多。

好啦～～我们今天主要要解决的就是怎么判断scrollview或者listview滑动到最底部：

1、scrollview滑动到最顶部

搞过android的小伙伴都知道，在我们原生scrollview中，当我们的scrollview的scrollY为0的时候，即到达顶部位置，那么rn中也是一样的。

2、scrollview滑动到滑动到底部

当scrollview的高度＋scrollY>=contentHeight的时候，就证明已经滑动到底部了。

好了，有了思路我们就开动了，在scrollview 中我们可以监听scroll的变化：

<ScrollView                    refreshControl={                         <RefreshControl                            refreshing={this.state.isRefreshing}                            onRefresh={this._onRefresh.bind(this)}                            tintColor="#ff0000"                            title="加载中..."                            titleColor="#00ff00"                            colors={['#ff0000', '#00ff00', '#0000ff']}                            progressBackgroundColor="#ffffff"                          />                    }                    onScroll={this._onScroll.bind(this)}                    scrollEventThrottle={50}                >

注意ios中一定要给scrollEventThrottle这个属性一个值，不然onScroll调用的频率会很少，影响我们的效果。

然后我们看看_onScroll方法中怎么写呢？

/**     * scrollview滑动的时候     * @private     */    _onScroll(event) {        if(this.state.loadMore){            return;        }        let y = event.nativeEvent.contentOffset.y;        let height = event.nativeEvent.layoutMeasurement.height;        let contentHeight = event.nativeEvent.contentSize.height;        console.log('offsetY-->' + y);        console.log('height-->' + height);        console.log('contentHeight-->' + contentHeight);        if(y+height>=contentHeight-20){            this.setState({                loadMore:true            });        }    }

是不是soeay呢？？当y+height>=contentHeight-20，这个20为我设置的一个偏移量（童鞋们可以按需求设置）。然后修改我们的state就ok了。

  render() {        let self = this;        return (            <View style={styles.container}>                {/*顶部导航栏*/}                {self._renderNavigator()}                <ScrollView                    refreshControl={                         <RefreshControl                            refreshing={this.state.isRefreshing}                            onRefresh={this._onRefresh.bind(this)}                            tintColor="#ff0000"                            title="加载中..."                            titleColor="#00ff00"                            colors={['#ff0000', '#00ff00', '#0000ff']}                            progressBackgroundColor="#ffffff"                          />                    }                    onScroll={this._onScroll.bind(this)}                    scrollEventThrottle={50}                >                    {/*顶部菜单导航*/}                    {self._renderTopMenus()}                    {/*推荐商家menu1*/}                    {self._recommendMerchant()}                    {/*推荐商家menu1*/}                    {self._recommendMerchant()}                    {/*推荐商家menu1*/}                    {self._recommendMerchant()}                    {/*推荐商家menu1*/}                    {self._recommendMerchant()}                    {/*推荐商家menu1*/}                    {self._recommendMerchant()}                    {/*推荐商家menu1*/}                    {self._recommendMerchant()}                    {/*尾部上拉加载更多view*/}                    {self._renderLoadMore()}                </ScrollView>            </View>        );    }

 /**     * 显示上啦加载view     * @private     */    _renderLoadMore() {        if (this.state.baseDatas == null || this.state.baseDatas.recommondMerchant == null) {            return;        }        return (            <LoadingMore                isLoading={this.state.loadMore}                onLoading={()=>{                    alert('fdfdfd');                }}            />        );    }

LoadingMore.js：

/** * @author YASIN * @version [React Native PABank V01,17/3/13] * @date 17/3/13 * @description LoadingMore */import React,{Component,PropTypes}from 'react';import {    View,    ActivityIndicator,    Text,    TouchableOpacity}from 'react-native';import * as ScreenUtils from '../../Util/ScreenUtil';import {AppBaseColor,AppBaseDimension}from '../../Constant/AppBase';export default class LoadingMore extends Component {    static propTypes = {        isLoading: PropTypes.bool    }    static defaultProps = {        isLoading: false    }    // 构造    constructor(props) {        super(props);        // 初始状态        this.state = {            isLoading: props.isLoading        };    }    render() {        if (this.state.isLoading) {            return (                <View                    style={{flexDirection:'row',alignSelf:'center',alignItems:'center',padding:ScreenUtils.scaleSize(10) }}>                    <ActivityIndicator                        size={'small'}                        color={AppBaseColor.MAIN_COLOR}                        animating={true}                        style={{width:ScreenUtils.scaleSize(15),height:ScreenUtils.scaleSize(15)}}                    />                    <Text style={{                        color:AppBaseColor.DESC_COLOR,                        fontSize:AppBaseDimension.FontSize.DESC,                        marginLeft:ScreenUtils.scaleSize(15)                    }}>                        正在加载...                    </Text>                </View>            );        } else if(this.props.onLoading){            return (                <TouchableOpacity                    onPress={()=>{                        this.setState({                            isLoading:true                        });                        this.props.onLoading&&this.props.onLoading()                    }}                >                    <Text style={{                        color:AppBaseColor.DESC_COLOR,                        fontSize:AppBaseDimension.FontSize.DESC,                        alignSelf:'center',                        padding:ScreenUtils.scaleSize(10)                    }}>                        点击加载更多...                    </Text>                </TouchableOpacity>            );        }    }    componentWillReceiveProps(nextProps) {        this.setState({            isLoading: nextProps.isLoading        });    }}

ScreenUtil.js：

/** * @author YASIN * @version [Android YASIN V01, ] * @blog http://blog.csdn.net/vv_bug * @description * 屏幕工具类 * ui设计基准,iphone 6 * width:750 * height:1334 */import {    PixelRatio,}from 'react-native';import Dimensions from 'Dimensions';export var screenW = Dimensions.get('window').width;export var screenH = Dimensions.get('window').height;var fontScale = PixelRatio.getFontScale();export var pixelRatio =PixelRatio.get();export const DEFAULT_DENSITY=2;const w2 = 750/DEFAULT_DENSITY;const h2 = 1334/DEFAULT_DENSITY;export function setSpText(size:Number) {    var scaleWidth = screenW / w2;    var scaleHeight = screenH / h2;    var scale = Math.min(scaleWidth, scaleHeight);    size = Math.round((size * scale + 0.5) * pixelRatio / fontScale);    return size;}/** * 屏幕适配,缩放size * @param size * @returns {Number} * @constructor */export function scaleSize(size:Number) {    var scaleWidth = screenW / w2;    var scaleHeight = screenH / h2;    var scale = Math.min(scaleWidth, scaleHeight);    size = Math.round((size * scale + 0.5));    return size/DEFAULT_DENSITY;}

好啦～～！就到这里了哦～～～

0 0