react-native scollview 刷新封装

最新推荐文章于 2024-03-27 15:16:44 发布

随风小薇

最新推荐文章于 2024-03-27 15:16:44 发布

阅读量381

点赞数 1

CC 4.0 BY-SA版权

分类专栏： react 文章标签： react react-native scollview刷新

本文为博主原创文章，未经博主允许不得转载

本文链接：https://blog.youkuaiyun.com/qq_39197547/article/details/87702205

react 专栏收录该内容

16 篇文章

订阅专栏

本文介绍了一个React Native应用中实现下拉刷新和滚动到底部加载更多数据的完整示例。通过自定义组件和状态管理，展示了如何监听滚动事件以判断是否达到底部，并在底部显示加载状态。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

import React, { Component } from 'react';
import {
    AppRegistry,
    View,
    RefreshControl,
    ScrollView,
    TouchableWithoutFeedback,
    Text
} from 'react-native';
import LoadMoreFooter from './LoadMoreFooter';
class Row extends Component {
    _onClick = ()=>{
        console.log('onclick');
        this.props.onClick(this.props.data);
    };
    render(){
        return(
            <TouchableWithoutFeedback onPress={this._onClick}>
                <View style={{backgroundColor: '#3a5795', borderWidth: 1, padding: 20, borderColor: 'grey', margin: 5}}>
                    <Text style={{alignSelf:'center', color:'#fff'}}>
                        {this.props.data.text + '('+ this.props.data.clicks + ' clicks)'}
                    </Text>
                </View>
            </TouchableWithoutFeedback>
        )
    }
}
export default  class RNRefreshView extends Component {
    constructor(props){
        super(props);
        this.state = {
            isRefreshing: false,
            isshowAll:true,
            isLoadAll:false,
            loaded: 0,
            //使用map创建对象数组
            rowData: Array.from(new Array(20)).map((val, i)=>({
                text: 'Inital row' + i,
                clicks: 0
                })
            )
        }
    }
    //传递当前的对象，将clicks+1，刷新界面
    _onClick22 =(row)=> {
        console.log('1111' + row.text);
        row.clicks++;
        this.setState({
            rowData: this.state.rowData,
        });
    };

    //判断滚动到底部
    handleScrollEnd = (event) => {
        const contentHeight = event.nativeEvent.contentSize.height;
        const scrollViewHeight = event.nativeEvent.layoutMeasurement.height;
        const scrollOffset = event.nativeEvent.contentOffset.y;

        console.log(scrollOffset + scrollViewHeight,"444444444444",contentHeight);

        const isEndReached = scrollOffset + scrollViewHeight+45 >= contentHeight; // 是否滑动到底部
        const isContentFillPage = contentHeight >= scrollViewHeight; // 内容高度是否大于列表高度
    
        if (isContentFillPage && isEndReached) {
          this.loadMoreData();
        }
      };
      rows=()=>{
          if(this.state.rowData){
             
            return <View>
                    {this.state.rowData.map((row, i)=>{
                         return <Row key={i} data={row} onClick={this._onClick22}/>;
                    })}
                   
                    {this.state.isshowAll&&<LoadMoreFooter isLoadAll={this.state.isLoadAll}/>}
                </View>
          }
        
      }
    render(){
        //map遍历并创建Row类,row是数组的对象，i是索引位置
        
        const rows = this.state.rowData.map((row, i)=>{
            console.log('4444' + i);
            return <Row key={i} data={row} onClick={this._onClick22}/>;
        });
        return(
            <ScrollView style={{flex: 1, backgroundColor: '#ffaaff'}}
                        onScrollEndDrag={this.handleScrollEnd} //判断是否滚动到最底部
                        refreshControl={
                            <RefreshControl refreshing={this.state.isRefreshing}
                                            progressBackgroundColor={"#ff3377"}
                                            onRefresh={this._onRefresh}
                                            tintColor="#ff0000"
                                            title="Loading..."
                                            titleColor="#00ff00"
                                            colors={['#ff0000', '#00ff00', '#0000ff']}
                                            />
                        }>
                {this.rows()}
               
            </ScrollView>
        )
    }
    loadMoreData=()=>{
        if(this.state.loaded>30)return this.setState({isLoadAll:true});
          setTimeout(()=>{
            //.concat拼接字符串，数组
            let rowData = Array.from(new Array(10)).map((val, i)=>({
                text: 'Loaded row' + (+this.state.loaded + i),
                clicks: 0
            }))
                .concat(this.state.rowData);
            this.setState({
                loaded: this.state.loaded + 10,
                isRefreshing: false,
                rowData: rowData,
            })
        });
    }
    _onRefresh =()=>{
        this.setState({
            isRefreshing: true,
            loaded:10
        });
        //间隔5秒结束下拉刷新
        setTimeout(()=>{
            //.concat拼接字符串，数组
            let rowData = Array.from(new Array(10)).map((val, i)=>({
                text: 'Loaded row' + (+this.state.loaded + i),
                clicks: 0
            }));  
            this.setState({
                isRefreshing: false,
                rowData: rowData,
                isLoadAll:false
            })
        }, 2000);
    }
}

底部加载更多信息


/***
 * 
 * LoadMoreFooter 
 * listview加载跟多底部组件
 * @param{isLoadAll}判断是否加载完
 */
import React, { Component } from 'react';
  import {
      View,
      Text,
      StyleSheet,
  } from 'react-native';
  class LoadMoreFooter extends Component {
      constructor(props) {
          super(props);
      }
      render() {
          return (
              <View style={styles.footer}>
                <Text style={styles.footerTitle}>
                    {this.props.isLoadAll ? '已加载全部' : '正在加载更多……'}
                </Text>
              </View>
          )
      }
  }
  const styles = StyleSheet.create({
      footer: {
          flexDirection: 'row',
          justifyContent: 'center',
          alignItems: 'center',
          height: 40,
      },
      footerTitle: {
          marginLeft: 10,
          fontSize: 15,
          color: 'gray'
      }
  })
  
  export default LoadMoreFooter