react-native-refresh-control-enrichment

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

刷新时触发

Type	Required
function	Yes

---

refreshState

刷新时状态

Type	Required
function	Yes

---

loadingView

加载中View

Type	Default
element	Yes

---

headerHeight

头部高度

Type	Default
number	60

---

centerTop

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

Type	Default
number	0

---

headerBackgroundColor

头部背景色

Type	Default
string	#ffffff

---

headerBackgroundImage

头部背景图片

Type	Required
url	Yes

---

showText

展示刷新状态

Type	Default
boolean	Yes

---

headerTitleStyle

刷新状态字体样式

Type	Default
style	Yes

---

showDate

展示刷新时间

Type	Default
boolean	Yes

---

headerDateStyle

更新时间字体样式

Type	Default
style	Yes

---

titleArray

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

Type	Default
array	yes

---

pullView

下拉 LoadingView

Type	Default
element	Yes

---

releaseView

释放 LoadingView

Type	Default
element	Yes

---

successView

成功 LoadingView

Type	Default
element	Yes

---

Reference library：

Android：

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

iOS：

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