ReactNative下拉刷新上拉加載

/**
 * 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
  }
})