react-native-refresh-control-enrichment v0.2.0

react-native-refresh-control-enrichment

Native Refresh

Android

IOS

Using npm

npm install react-native-refresh-control-enrichment --save

or using yarn:

yarn add react-native-refresh-control-enrichment

Installation

react-native version >= 0.61.5

After that, we need to install the dependencies to use the project on iOS(you can skip this part, if you are using this on Android) Now run：cd ios && pod install

Using

import ZHRefreshControl, {ZHScrollView} from 'react-native-refresh-control-enrichment';

<ZHScrollView
    style={{flex: 1}}
    refreshControl={
        <ZHRefreshControl
            ref={(r) => this._finishRefresh = r}
            headerHeight={80} // headerHeight
            headerBackgroundColor={'#e6e6e6'} // headerBackgroundColor and headerBackgroundImage, do not combine
            onRefresh={()=>{
                console.log('======== Refreshing ========');
                setTimeout(()=>{
                    // Refreshing End
                    this._finishRefresh.finishRefresh();
                    console.log('======== Refreshing End ========');
                },2000)
            }}
        />
    }
>
    <View style={{flex: 1, height: 1000, backgroundColor: '#dddddd', alignItems: 'center', paddingTop: 300}}>
        <Text style={{color: '#000', fontSize: 16}}>⬇️ down 😊</Text>
    </View>
</ZHScrollView>

Using In FlatList

import {FlatList} from 'react-native';
import ZHRefreshControl, {ZHScrollView} from 'react-native-refresh-control-enrichment';

<FlatList
    data={['#8c4fff', '#f0b1ff', '#908c95', '#effba5', '#2b2cff', '#009c18']}
    renderScrollComponent={() => (
        <ZHScrollView
            style={{flex: 1}}
            refreshControl={
                <ZHRefreshControl
                    ref={(r) => this._finishRefresh = r}
                    headerHeight={80} // headerHeight
                    headerBackgroundColor={'#e6e6e6'} // headerBackgroundColor and headerBackgroundImage, do not combine
                    onRefresh={()=>{
                        console.log('======== Refreshing ========');
                        setTimeout(()=>{
                            // Refreshing End
                            this._finishRefresh.finishRefresh();
                            console.log('======== Refreshing End ========');
                        },2000)
                    }}
                />
            }
        />
    )}
    keyExtractor={(item, key) => key.toString()}
    renderItem={({item, index}) => (
        <View style={{backgroundColor: item, marginHorizontal: 15, height: 100, borderRadius: 20, marginTop: 15}}/>
    )}
/>

Documentation

Props

onRefresh

刷新时触发

refreshState

刷新时状态

loadingView

加载中View

headerHeight

头部高度

centerTop

内容距离顶部高度（一般为状态栏高度）

headerBackgroundColor

头部背景色

headerBackgroundImage

头部背景图片

showText

展示刷新状态

headerTitleStyle

刷新状态字体样式

showDate

展示刷新时间

headerDateStyle

更新时间字体样式

titleArray

自定义提示状态，注：数量需要为四个

pullView

下拉 LoadingView

releaseView

释放 LoadingView

successView

成功 LoadingView

Reference library：

Android：

https://github.com/react-native-studio/react-native-SmartRefreshLayout

iOS：

https://github.com/react-native-studio/react-native-MJRefresh