react-native-smart-refresh-flatlist

Documentation

用React Native也有一段时间了，受到以前做的电商项目做下拉刷新的灵感，基于目前flatlist并没有可以自定义的拉头，且react-native-pull有着各种问题还未解决，于是决定基于react-native-pull自己写一个，顺便锻炼一下自己的React Native 手势和动画的技能，最后说一句，站在巨人肩膀真的可以看的更远。

Features

• 基于Flatlist组件封装
• 可自定义的下拉刷新
• 可自定义的上拉加载
• 可自定义的加载动画、网络请求失败、无数据页面
• 解决了react-native-pull的issues大部分问题
• 兼容ios android两端至最新版本（目前为0.50）
• ......

Params

Key	Description	Type	Default
AsycConnectedChange	检测网络的事件（低版本change 高版本 connectionChange ）	string	'change'
topBackgroundColor	下拉显示器的背景色	string	'#eca02a'
renderItem	flatlist的属性	function
initialPage	默认的起始页码	number	0
pageSize	每页的数量	number	10
onFetch	fetch方法	function	onFetch(page, pageSize, callback)
topIndicatorHeight	显示器的高度	number	100
pullOkMargin	下拉到ok状态时topindicator距离顶部的距离	number	100
duration	动画的延迟时间	number	300
footerLoading	列表底部加载中的组件	function
loadingNoMore	列表底部没有更多数据的组件	function
loadingMore	列表底部加载更多的组件	function	loadingMore(_getMore)
noDataView	列表请求数据为空的组件	function	noDataView(_rePostFetch)
errorView	列表请求数据失败的组件	function	errorView(_rePostFetch)
topIndicatorRender	刷新显示器组件	function	topIndicatorRender(pulling, pullok, pullrelease, pullSuccess, this.gesturePosition)

Usage

Step 1 - install

	npm install react-native-smart-refresh-flatlist --save

Step 2 - import and use in project

on Android

in AndroidManifest.xml

   <uses-permission android:name="android.permission.ACCESS_NETWORK_STATE" />

Main

    import SmartFlatList from 'react-native-smart-refresh-flatlist'

    constructor(props) {
        super(props);
        this.state = {}
    }
    fetch() {

        return fetch(REQUEST_URL).then((response) => response.json())
        .then((responseData) => {
            responseData.sum = responseData.hourly.length
            return responseData
        });
    }
    async onFetch(page, pageSize, callback) {
        // do something for fetch data
        await this.fetch().then((response) => {
            !response ? callback('', '', true) : callback(response.hourly, response.sum)
        });
    }
    render(){
        return  <SmartFlatList
                    topBackgroundColor={'#fccb57'}
                    initialNumToRender={7}
                    renderItem={(data) => this.renderItem(data)}
                    initialPage={1}
                    pageSize={10}
                    onFetch={this.onFetch.bind(this)}
                />
    }
	...

Reference

https://github.com/gzfgeh/RefreshListDemo
https://github.com/greatbsky/react-native-pull
https://github.com/FaridSafi/react-native-gifted-listview

Finally

如果对rn源码里的art有兴趣也可以打开源码的注释看看，不过ios需要配置
如果喜欢，请顺手我一个star，非常感谢~ ：）