ReactNative下拉刷新上拉加载

来源：互联网发布：ipad iphone软件全屏编辑：程序博客网时间：2024/05/24 01:15
/** * 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  }})
阅读全文
0 0