react-native-sf-flatlist

支持上拉下拉刷新的FlatList,解决ListEmptyComponent不能居中显示的问题，并且只在第一次数据加载后数据为空时才会显示

安装

• npm install react-native-sf-flatlist

Props

parameter	type	required	description	default
onBeginRefreshHeader	func	no	开始下拉刷新回调	null
onBeginRefreshFooter	func	no	开始上拉刷新回调	null
onEndShouldRate	number	no	上拉开始刷新的距离（0-1.0）	0.2
refreshHeaderTitle	string	no	上拉刷新标题	null
refreshHeaderColor	string	no	上拉刷新菊花颜色	null
refreshHeaderBgColor	string	no	上拉刷新背景颜色（仅限Android）	null
emptyComponent	component	no	空数据时显示组件	null
emptyDefaultTitle	string	no	emptyComponent为空时默认空数据标题	'没有数据'
emptyDefaultColor	string	no	emptyComponent为空时默认空数据颜色	'rgba(200,200,200,1)'

Methods

Methods	Params	Param Types	description	Example
beginRefreshHeader	null	null	手动开始下拉刷新
endRefreshHeader	null	null	结束下拉刷新（数据更新成功后调用）
endRefreshFooter	null	null	结束上拉刷新（数据更新成功后调用）
endRefreshNomore	null	null	结束上拉刷新,没有更多数据状态，再次加载不会调用onBeginRefreshFooter（数据更新成功后调用）

例子

import React, { Component } from 'react';
import {
  Platform,
  StyleSheet,
  Text,
  View,
  Image,
    Dimensions
} from 'react-native';
import SFFlatList from "react-native-sf-flatlist"
var width = Dimensions.get('window').width;

export default class App extends Component {
  constructor(props){
    super(props);
    this.state = {
      dataSource:[

      ]
    }
  }
  componentDidMount() {
    this.refs.flat.beginRefreshHeader()

  }
  onBeginRefreshHeader = () => {
    setTimeout(()=>{
      //测试数据
      tmp = [];
      for (var i = 0; i < 15; i++){
        var data = {name:'标题_'+i,des:'描述描述'};
        tmp.push(data);
      }
      this.setState({
        dataSource:tmp
      })
      //结束下拉刷新
      this.refs.flat.endRefreshHeader()
    },1000)
  }
  onBeginRefreshFooter = () => {
    setTimeout(()=>{
      //测试数据
      tmp = [];
      for (var i = 0; i < 5; i++){
        var data = {name:'标题_'+i,des:'描述描述'};
        tmp.push(data);
      }
      this.setState({
        dataSource:this.state.dataSource.concat(tmp)
      },()=>{
        this.refs.flat.endRefreshFooter()
      })

      //结束上啦刷新

    },2000)
  }
  _renderItem = ({item}) => {
    return(
      <View style={{
        height:50
      }}>
        <Text style={{
          fontSize:20,
          color:'black'
        }}>{item.name}</Text>
      </View>
    )
  }
  emptyComponent = () => {
    return(
        <View style={{
          width:width,
          height:300,
          alignItems:'center',
          justifyContent:'center'
        }}>
          <Image style={{
            width:100,
            height:100
          }} source={require('./img/comment.png')}>

          </Image>
          <Text style={{
            color:'rgba(205,205,205,1)',
            fontSize:15,
            marginTop:20
          }}>{'还没有人评论，加油跟帖吧～'}</Text>
        </View>
    )
  }
  render() {
    return (
      <View style={styles.container}>
        <View style={{
          width:width,
          height:60,
          alignItems:'center',
          backgroundColor:'rgba(33,143,252,1)',
          justifyContent:'center'
        }}>
          <Text style={{
            fontSize:16,
            color:'white',
            marginTop:10
          }}>FlatList</Text>
        </View>
        <SFFlatList
            ref = "flat"
            onBeginRefreshHeader={this.onBeginRefreshHeader}
            onBeginRefreshFooter={this.onBeginRefreshFooter}
            emptyComponent={this.emptyComponent()}
            data={this.state.dataSource}
            renderItem={this._renderItem}
        />
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1
  },

});