https://github.com/bozaigao/react-native-flatlist-with-custom-refresh

给react-native官方组件flalist组件增加自定义的下拉刷新组件和上拉加载事件,主要是为了解决在ScrollView和Flatlist混用的情况下,flatlist自带的RefreshControl下拉刷新组件会和ScrollView的横向滑动手势冲突而导致左右滑动不灵敏,同时在Android端在ScrollView滚动后在执行下拉刷新会导致RefreshControl卡在刷新过程中.
https://github.com/bozaigao/react-native-flatlist-with-custom-refresh

Last synced: 5 days ago
JSON representation

给react-native官方组件flalist组件增加自定义的下拉刷新组件和上拉加载事件,主要是为了解决在ScrollView和Flatlist混用的情况下,flatlist自带的RefreshControl下拉刷新组件会和ScrollView的横向滑动手势冲突而导致左右滑动不灵敏,同时在Android端在ScrollView滚动后在执行下拉刷新会导致RefreshControl卡在刷新过程中.

• Host: GitHub
• URL: https://github.com/bozaigao/react-native-flatlist-with-custom-refresh
• Owner: bozaigao
• License: mit
• Created: 2019-06-29T08:08:14.000Z (over 5 years ago)
• Default Branch: master
• Last Pushed: 2023-05-06T04:22:32.000Z (over 1 year ago)
• Last Synced: 2024-10-07T17:48:52.869Z (about 1 month ago)
• Language: TypeScript
• Homepage:
• Size: 1.56 MB
• Stars: 4
• Watchers: 0
• Forks: 1
• Open Issues: 3
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# react-native-flatlist-with-custom-refresh

### 安装

直接执行npm install react-native-flatlist-with-custom-refresh --save

### 使用方法

flatlist官方组件的属性和方法通用，只是增加了下拉刷新组件添加了上拉加载事件而已

```javascript

  //@ts-ignore

  import FlatListWithCustomRefresh from 'react-native-flatlist-with-custom-refresh';

   (this.refFlatList = ref)}

                          onMyRefresh={() => {

                              console.log('下拉刷新--->>');

                              this.refresh();

                          }}

                          style={[bgColor(commonStyles.pageDefaultBackgroundColor)]}

                          onEndReached={() => {

                          console.log('上拉加载--->>');

                              this.loadMore();

                          }}

                          //@ts-ignore

                          keyExtractor={(item, index) => index.toString()}

                          scrollEventThrottle={16}

                          onEndReachedThreshold={0.1}

                          data={sourceData}

                          ListEmptyComponent={resFlag && }

                          ListHeaderComponent={

                              

                                  {plateList.map((val, index) => {

                                      return (

                                          

                                              

                                          

                                      );

                                  })}

                              

                          }

                          ListFooterComponent={this.state.showFooter ?  : }

                          renderItem={({item, index}) => this.rowRenderer(item, index)}

                      />

```

### iOS效果图

![iOS效果图](./iOS.png)

### Android效果图

![Android效果图](./Android.jpeg)