rnr
react-native-refreshflatlist-fixed
npm i react-native-refreshflatlist-fixed
rnr

react-native-refreshflatlist-fixed

[![npm](https://img.shields.io/npm/v/react-native-refreshflatlist.svg)](https://www.npmjs.com/package/react-native-refreshflatlist) [![npm](https://img.shields.io/npm/dm/react-native-refreshflatlist.svg)](https://www.npmjs.com/package/react-native-refresh

by Aran.Hu

1.3.0 (see all)License:ISCTypeScript:Not Found
npm i react-native-refreshflatlist-fixed
Readme

RefreshFlatList

npm npm npm

A simple support ios and android platform custom header refresh components(RN >= 0.43)

npm i react-native-refreshflatlist-fixed --save
react-native link react-native-refreshflatlist-fixed

Preview

  • ScreenShot

  • ViewType
// ScrollView
_renderItem = (isTriggerPressFn) => {
    return (
      <View style={{width: width, height: 100}} >
        <Text>{'Customer ScrollView'} </Text>
      </View>
    )
}

// ListView
_renderItem = (isTriggerPressFn, data) => {
    return (
      <View style={{width: width, height: 100}} >
        <Text>{'Customer ListVeiw' + item.title} </Text>
      </View>
    )
  }

Demo

git clone https://github.com/naivehhr/react-native-refreshflatlist.git
cd react-native-refreshflatlist-fixed/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)
  }

  onPress(isTriggerPressFn) {
    // 仅需在Android设置
    if (isTriggerPressFn()) {
      Alert.alert('onPress')
    }
  }

  _renderItem = (isTriggerPressFn, data) => {
    return (
      <View style={{ width: width, height: 100 }} >
        <Text>{'The Customer ListView'} </Text>
        <Button onPress={this.onPress.bind(this, isTriggerPressFn)} title={'btn'} />
      </View>
    )
  }
  
  
    /**
    * refreshState: 0: pullToRefresh; 1: releaseToRefresh; 2: refreshing; 3: refreshdown
    * percent:
    */
  _customerHeader = (refreshState, percent) => {
    const { headerHeight, msg } = this.state
    switch (refreshState) {
      case RefreshState.pullToRefresh:
        return (
          <Animated.View style={{justifyContent: 'center', alignItems: 'center', width: width, height: headerHeight, backgroundColor: 'red'}} >
            <Text>{ 'pull to refresh' + percent }</Text>
          </Animated.View>
        )
      case RefreshState.releaseToRefresh:
        return (talk
          <Animated.View style={{justifyContent: 'center', alignItems: 'center', width: width, height: headerHeight, backgroundColor: 'red'}} >
            <Text>{ 'release to refresh' + percent }</Text>
          </Animated.View>
        )
      case RefreshState.refreshing:
        return (
          <Animated.View style={{justifyContent: 'center', alignItems: 'center', width: width, height: headerHeight, backgroundColor: 'red'}} >
            <Text>{ 'refreshing....' + percent }</Text>
          </Animated.View>
        )
      case RefreshState.refreshdown:
        return (
          <Animated.View style={{ flexDirection: 'row',height: headerHeight, justifyContent: 'center', alignItems: 'center', backgroundColor: 'red',}}>
            <Text>{ 'refresh complete' }</Text>
          </Animated.View>
        )
      default:
        return (
          <View style={{justifyContent: 'center', alignItems: 'center', height: headerHeight, width: width}}>
            <Text>{ percent }</Text>
          </View>
        )
    }
  }

  _listFooterComponent = () => {
    return (
      <View style={{ flex:1, justifyContent: 'center', alignItems: 'center',width: width, height: 30, backgroundColor: 'red'}} >
         <Text style={{textAlign: 'center',}}> { this.state.footerMsg } </Text>
      </View>
    )
  }

  _onEndReached = () => {
  }

  render() {
    return (
      <View style={styles.container}>
        <RefreshFlatList
          data={this.state._data}
          refreshing={this.state.refreshing}
          onRefreshFun={this._onRefreshFun}
          onEndReached={this._onEndReached}
          customRefreshView={this._customerHeader}
          listFooterComponent={this._listFooterComponent}
          renderItem={this._renderItem}
          viewType={ViewType.ListView}
        />
      </View>
    );
  }
}

Props


PropTypeOptionalDefaultDescriptionPlatform
...ListView.propTypesdoc
customRefreshViewfuncYesDefaultView自定义头部组件all
onRefreshFunfuncYesDefaultTestFun触发刷新调用的方法all
onEndReachedfuncYesDefaultTestFun触发加载调用的方法all
isTriggerPressFnfuncYesreturn true列表滑动中,判断是否应响应触摸点的点击事件(button的onPress事件);只有回到原点才会触发android
isRefreshingbooleanfalseall
viewTypeobjectYesScrollViewScrollView, ListViewall

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

更新日志

2017/06/23

  • 升级RN至0.45.1
  • 集成React Navigation
  • 更改ScrollView为FlatList实现
  • 更新example

2017/06/30

  • 代码结构
  • 优化性能
  • ScrollView下刷新 => render整个页面

2017/07/3

  • 更改android手势触发逻辑

2017/12/27

  • 修复一些情况下Android平台滑动列表时触发子元素点击事件的问题

问题

  • 切换页面时同样会触发使用本组件的页面render

Downloads/wk

35

GitHub Stars

22

LAST COMMIT

3yrs ago

MAINTAINERS

1

CONTRIBUTORS

2

OPEN ISSUES

1

OPEN PRs

0
VersionTagPublished
1.3.0
latest
3yrs ago
No alternatives found
No tutorials found
Add a tutorial