react-native-smart-refresh-flatlist v1.0.5

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

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，非常感谢~ ：）