RefreshListView

RefreshFlatList & RefreshVirtualizedList

A simple support ios and android platform custom header refresh components; currently only supports FlatList (RN >= 0.43)

npm i react-native-refreshflatlist --save

react-native-refreshflatlist

Preview

• ListView

  
  
  

  android-listview.gif

ios-listview.gif

• ScrollView

• ViewType

// ScrollView
_renderItem = () => {
    return (
      
        {'我是自定义的ScrollView'} 
      
    )
}

// ListView
_renderItem = ({item}) => {
    return (
      
        {'ListVeiwItem' + item.title} 
      
    )
  }

Demo

git clone https://github.com/naivehhr/react-native-refreshflatlist.git
cd react-native-refreshflatlist/example && npm install

Usage

export default class FlatListTest extends Component {
  constructor() {
    super()
    this.state = {
      headerHeight: 100,
      refreshing: false,
      _data: [],
      footerMsg: ''
    }
  }
  componentDidMount() {
    this.setState({_data: [1,2,3,4]})
  }

  _onRefreshFun = () => {
    this.setState({refreshing: true})
    setTimeout(() => {
      this.setState({refreshing: false})
    },2000)
  }

  _renderItem = ({item}) => {
    // ListView Item
    return (
      
        {'list item' + item.title} 
      
    )
  }
  
  
    /**
    * refreshState: 0: pullToRefresh; 1: releaseToRefresh; 2: refreshing; 3: refreshdown
    * percent:
    */
  _customerHeader = (refreshState, percent) => {
    const { headerHeight, msg } = this.state
    switch (refreshState) {
      case RefreshState.pullToRefresh:
        return (
          
            { 'pull to refresh' + percent }
          
        )
      case RefreshState.releaseToRefresh:
        return (talk
          
            { 'release to refresh' + percent }
          
        )
      case RefreshState.refreshing:
        return (
          
            { 'refreshing....' + percent }
          
        )
      case RefreshState.refreshdown:
        return (
          
            { 'refresh complete' }
          
        )
      default:
        return (
          
            { percent }
          
        )
    }
  }

  _listFooterComponent = () => {
    return (
      
          { this.state.footerMsg } 
      
    )
  }

  _onEndReached = () => {
  }

  render() {
    return (
      
        
      
    );
  }
}

Props

---

Prop	Type	Optional	Default	Description
...ListView.propTypes					doc
customRefreshView	func	Yes	DefaultView	自定义头部组件
onRefreshFun	func	Yes	DefaultTestFun	触发刷新调用的方法
isRefreshing	boolean		false
viewType	object	Yes	ScrollView	ScrollView, ListView

注： 本组件Android手势模块基于 react-native-smart-pull-to-refresh-listview