ReactNative下拉刷新上拉加载

最新推荐文章于 2024-08-20 09:55:47 发布

TaoLee-

最新推荐文章于 2024-08-20 09:55:47 发布

阅读量727

点赞数

本文链接：https://blog.youkuaiyun.com/TaooLee/article/details/77097419

版权

本文详细介绍了在ReactNative中实现下拉刷新和上拉加载更多数据的功能。通过引入第三方库，如react-native-refreshable-listview，结合生命周期方法和自定义组件，讲解了如何集成和定制滚动加载效果，帮助开发者提升用户体验。

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

/**
 * Created by TaoLee on 2017/8/1.
 */
import React, {Component} from 'react';
import {
  View,
  StyleSheet,
  ListView,
  Image,
  Text
} from 'react-native';
import {
  SwRefreshScrollView,
  SwRefreshListView,
  RefreshStatus,
  LoadMoreStatus
} from 'react-native-swRefresh'
export default class BaiKeList extends Component {
  _page = 0;
  _dataSource = new ListView.DataSource({rowHasChanged: (row1, row2) => row1 !== row2});

  constructor(props) {
    super(props);
    this.state = {
      url: 'https://ss0.baidu.com/73F1bjeh1BF3odCf/it/u=507799324,6939197&fm=73',
      content: '所以便自己写了一个简单好用的刷新组件支持支持自定所以便自己写了一个简单好用的刷新组件支持支持自定所以便自己写了一个简单好用的刷新组件支持支持自定所以便自己写了一个简单好用的刷新组件支持支持自定',
      listItems: [],
    };
  }

  componentWillMount() {
    this.initData();
  }

  initData() {
    const urlPath = `http://192.168.0.222:28088/api/v1/baike/get-new-baike?resType=10`;
    fetch(urlPath, {
      method: 'GET',
      headers: {
        Accept: 'application/json',
        'Content-Type': 'application/json',
      },
    })
      .then((response) => {
        //判空操作
        return response.json();
      })
      .then((json) => {
        this.setState({
          listItems: json.data,
        });
      })
      .catch((error) => {
        console.warn('askInfo request failed', error);
      });
  }


  // componentDidMount() {
  //   let timer = setTimeout(() => {
  //     clearTimeout(timer);
  //     // this.refs.scrollView.beginRefresh()
  //     this.refs.listView.beginRefresh()
  //   }, 500) //自动调用刷新 新增方法
  // }

  _renderRow(rowData) {
    return (
      <View style={styles.cell}>
        <Text>{'这是第' + rowData + '行'}</Text>
        <View style={styles.container}>
          <Image source={{uri: rowData.coverUrl, cache: 'force-cache'}} style={styles.image}/>
          <View style={styles.container_right}>
            <View style={styles.top}>
              <Text style={styles.name}>{rowData.authors}</Text>
              <Text style={styles.time}>{rowData.createTime}</Text>
            </View>
            <Text style={styles.content}>{rowData.description}</Text>
          </View>
        </View>
      </View>)

  }

  _onListRefresh(end) {
    let timer = setTimeout(() => {
      clearTimeout(timer);
      this._page = 0;
      let data = [];
      for (let i = 0; i < 10; i++) {
        data.push(i)
      }
      this.setState({
        listItems: data,
      });
      this.refs.listView.resetStatus();//重置上拉加载的状态
      end()//刷新成功后需要调用end结束刷新
      // this.refs.listView.endRefresh() //建议使用end() 当然 这个可以在任何地方使用
    }, 1500)
  }

  _onLoadMore(end) {
    let timer = setTimeout(() => {
      clearTimeout(timer);



      this._page++;
      let data = [];
      for (let i = 0; i < (this._page + 1) * 10; i++) {
        data.push(i)
      }
      this.setState({
        listItems: data,
      });
      //end(this._page > 2)//加载成功后需要调用end结束刷新 假设加载4页后数据全部加载完毕
      this.refs.listView.endLoadMore(this._page > 2)
    }, 2000)
  }

  render() {
    return (
      <SwRefreshListView
        dataSource={ this._dataSource.cloneWithRows(this.state.listItems)}
        ref="listView"
        renderRow={this._renderRow.bind(this)}
        onRefresh={this._onListRefresh.bind(this)}
        onLoadMore={this._onLoadMore.bind(this)}
        //isShowLoadMore={false}
        // renderFooter={() => {
        //   return (
        //     <View style={{backgroundColor: 'blue', height: 30}}>
        //       <Text>我是footer</Text>
        //     </View>)
        // }}
      />
    )
  }
}

const styles = StyleSheet.create({
  container: {
    flexDirection: 'row',
    backgroundColor: '#ffffff',
    borderWidth: 0.5,
    borderColor: '#d6d7da',
    marginBottom: 14,
    paddingBottom: 14
  },
  image: {
    borderRadius: 45,
    width: 34,
    height: 34,
    marginLeft: 30,
    marginTop: 14,
  },
  container_right: {
    flex: 1,
    marginTop: 14,
    marginLeft: 16,
    marginRight: 30
  },
  top: {
    flexDirection: 'row',
  },
  name: {
    textAlign: 'left'
  },
  time: {
    fontSize: 12,
    color: '#d6d7da',
    flex: 1,
    textAlign: 'right'
  },
  content: {
    fontSize: 12,
    lineHeight: 20
  }
})