/react-native-flatlist-with-custom-refresh

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

Primary LanguageTypeScriptMIT LicenseMIT

react-native-flatlist-with-custom-refresh

安装

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

使用方法

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

  //@ts-ignore
  import FlatListWithCustomRefresh from 'react-native-flatlist-with-custom-refresh';

  <FlatListWithCustomRefresh
                          ref={ref => (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 && <NodataHomepage/>}
                          ListHeaderComponent={
                              <View>
                                  {plateList.map((val, index) => {
                                      return (
                                          <View key={index}>
                                              <PageuiType navigation={navigation} data={val}/>
                                          </View>
                                      );
                                  })}
                              </View>
                          }
                          ListFooterComponent={this.state.showFooter ? <FooterView/> : <View style={[h(6)]}/>}
                          renderItem={({item, index}) => this.rowRenderer(item, index)}
                      />

iOS效果图

iOS效果图

Android效果图

Android效果图