React-native-page-listview How to use

React-native-page-listview

For the Listview/flatlist package, it is convenient to load the network data by paging, also supports custom drop-down refresh view and pull-up to load more view. Compatible with high version flatlist and low version ListView. Components are automatically selected based on the version of the react-native you are using (high version uses Flatlist, low version uses ListView)

GitHub Address: Https://github.com/geek-prince/react-native-page-listview

NPM Address: Https://www.npmjs.com/package/react-native-page-listview

#1.0.3->1.1.0 Changes/additions:

    1.增加手动处理数组数据方法,    2.父组件重新加载数据后手动刷新数据    3.从网络获取数据,数据为空时的渲染界面,    4.解决部分手机上界面为空,不显示的问题,(鉴于自定义组件宽高实用性并不大,而且部分手机显示有问题,去除自定义组件宽高,改为自适应)    5.对放在scrollView中的支持(放在ScrollView中时则不能上拉刷新,下拉加载更多)    6.加入可选属性allLen,对于分页显示时可以指定数据的总条数

Installation

npm install react-native-page-listview --save

How to use

下面说明中的‘组件‘指的就是当前这个‘react-native-page-listview‘组件.

Import Components First

import PageListView from ‘react-native-page-listview‘;

1. No paging, no data from the network (for presentation of local array data)

At this point you just need to pass an array to the component

let arr=[你要在ListView上展示的数据数组]

Use this component in the Render method

<PageListView     renderRow={this.renderRow}     refresh={this.refresh} />

renderRowmethod requires you to specify the display view of each row of data, in ListView/FlatList the renderRow/renderItem same way

renderRow=(rowData,index)=>{    return(<View>你的View展示</View>);}

refreshArray in the method that specifies the data to be displayed

refresh=(callBack)=>{    callBack(arr);}

2. No paging, get data from the network (for the network array data is not many, the backend interface is not paged)

This is consistent with the above method, only need to change the refresh method

refresh=(callBack)=>{    fetch(url)        .then((response)=>response.json())        .then((responseData)=>{            //根据接口返回结果得到数据数组            let arr=responseData.result;            callBack(arr);        });}

The results of these two methods are as follows (no drop-down refresh and pull-up more):

You cannot load or display a problem on GitHub, click here: Http://github.jikeclub.com/pageListView/s1.gif

3. Get data from the network and paging, do not customize pull-up refresh, pull-down load more view (for more data, when paging request data)

At this point you need to give the component a few properties,,, pageLen renderRow refresh loadMore .

<PageListView     pageLen={15}     renderRow={this.renderRow}     refresh={this.refresh}     loadMore={this.loadMore} />

pageLenSpecifies how many data you can get each time you call the backend paging interface.
renderRowUse the same method as above to render the display of each line.
refreshThe method is called when your component starts loading and you drop the refresh, so you need to pass the callback to the component in this method from the first page of the backend paging interface that you requested to return the data.

refresh=(callBack)=>{    fetch(分页接口url+‘?page=1‘)        .then((response)=>response.json())        .then((responseData)=>{            //根据接口返回结果得到数据数组            let arr=responseData.result;            callBack(arr);        });}

loadMoreThe method is called when you drop the load more, and in addition to callBack another parameter indicating that the paging page data to be loaded is the first page, you only need to pass the page corresponding page array data through the callback to the component.

loadMore=(page,callback)=>{    fetch(分页接口url+‘?page=‘+page)        .then((response)=>response.json())        .then((responseData)=>{            //根据接口返回结果得到数据数组            let arr=responseData.result;            callBack(arr);        });};

The rendering effect shown in this case is:

You cannot load or display a problem on GitHub, click here: Http://github.jikeclub.com/pageListView/s2.gif

4. Get data from the network and page, and customize the drop-down refresh, pull up to load more view

The render drop-down refreshes the view using renderRefreshView , and at this point it needs to be given its height renderRefreshViewH , rendering loads more view usage renderLoadMore , rendering the view using no more data renderNoMore .

<PageListView     pageLen={15}     renderRow={this.renderRow}     refresh={this.refresh}     loadMore={this.loadMore}     //上面四个属性使用方法同上    renderRefreshView={this.renderRefreshView}    renderRefreshViewH={150}    renderLoadMore={this.renderLoadMore}    renderNoMore={this.renderNoMore}/>

renderRefreshView=()=>{        return(            <View style={{}}>//你对渲染下拉刷新View的代码</View>        );    };

renderLoadMore=()=>{        return(            <View style={{}}>//你对渲染加载更多View的代码</View>        );    };

renderNoMore=()=>{        return(            <View style={{}}>//你对渲染没有更多数据时View的代码</View>        );    };

The rendering effect shown in this case is:

You cannot load or display a problem on GitHub, click here: Http://github.jikeclub.com/pageListView/s3.gif

Expand drop-Down refresh advanced

If you want to achieve a more beautiful and more beautiful drop-down refresh effect, you can use it as follows renderRefreshView .

pullStateThe corresponding string will be returned to you based on your drop-down status:

• ‘‘: Status without pull-down action
• ‘pulling‘: The state that is being pulled down and not yet pulled to the specified position
• ‘pullOk‘: Is pulling down and pulling to the specified position and does not let go of the state
• ‘pullRelease‘: The state after pulling to the specified position and letting go

renderRefreshView=(pullState)=>{        switch (pullState){            case ‘pullOk‘:                return <View style={}>                    //下拉刷新,下拉到指定的位置时,你渲染的View                </View>;                break;            case ‘pullRelease‘:                return <View style={}>                    //下拉刷新,下拉到指定的位置后,并且你松手后,你渲染的View                </View>;                break;            case ‘‘:            case ‘pulling‘:            default:                return <View style={}>                    //下拉刷新,你正在下拉时还没有拉到指定位置时(或者默认情况下),你渲染的View                </View>;                break;        }    };

The rendering effect shown in this case is:

You cannot load or display a problem on GitHub, click here: Http://github.jikeclub.com/pageListView/s4.gif

Working with arrays of data

Sometimes we do not have to directly render the data retrieved from the backend, we need to do some processing of the data, you can add attributes in the component dealWithDataArrCallBack to do some processing of the array data. The following is an inverted sequence of arrays retrieved from the backend.

<PageListView     //其他的属性...    dealWithDataArrCallBack={(arr)=>{return arr.reverse()}}/>

The operations on the array above will only be triggered when the paging request data has "pull-up" and "pull-load more". Sometimes we might want to manipulate the data array after a click event. This time you can invoke the component's changeDataArr method to implement. You need to make a ref reference to the component first

<PageListView     //其他的属性...    refs={(r)=>{!this.PL&&(this.PL=r)}}/>

Then, when you perform an operation, you need to modify the array data by actively invoking the changeDataArr method to implement

this.PL1.changeDataArr((arr)=>{return arr.reverse()});

Refresh Data Manually

This is typically used when a component displays a category in a data classification, and then the parent component changes the filtered classification, and the parent component obtains the array data by manually passing the data to the component and refreshing the component, which can be used in this manualRefresh way. This method also needs to get the ref reference to the component first as above. And then after the parent component gets the array of data res

this.PL.manualRefresh(res);

Manually Refresh Components

Rendering without a single piece of data

If you get an array of data that is empty, you can use the renderEmpty method to render the view that you want to display in this case

<PageListView     //其他的属性...    renderEmpty={this.renderEmpty}/>renderEmpty=()=>{return(<View style={[]}>你的View渲染代码</View>);}

Small function

In addition, FlatList there is a property to ItemSeparatorComponent set each row of view between the split view, I feel good to write to the component, compatible ListView .

If you need to put the components into the ScrollView when you add inScrollView={true} the properties, but at this time you can not use the pull-up refresh, drop-down load more.

List of properties:

Props	function	Default Value
Renderrow	Ways to process "render each line of Flatlist/listview"	Null
Refresh	To handle "drop-down refresh" or "Start loading Data" method	Null
Loadmore	To handle "load more" methods	Null
Pagelen	The number of data per page paged	0
Alllen	Total number of data bars	0
Dealwithdataarrcallback	If you need to process the array data returned with the current back end, the incoming callback function	Null
Renderloadmore	and data can be obtained from the backend when rendering the bottom view method	Null
Rendernomore	No data (the data has all been loaded from the backend) is the way to render the bottom view	Null
Renderrefreshview	Render drop-down refreshed view style	Null
Renderrefreshviewh	The height of the view style that renders the drop-down refresh	60
Renderempty	Render interface If the network gets data empty	Null
Itemseparatorcomponent	Render split line view between each row of view	Null
Inscrollview	Whether the current component is placed in ScrollView (cannot pull up refresh when placed in ScrollView, pull load more)	False
Flatlist/listview properties of the self	is based on Flatlist/listview, so you can use their own properties directly

注意:如果屏幕下方有绝对定位的View时,这时组件自适应宽高,下面的一部分内容会被遮挡,这时一个很好的解决方法是在组件下方渲染一个与绝对定位等高的透明View来解决(<View style={{height:你绝对定位View的高度,backgroundColor:‘#0000‘}}/>).

If you think my component is easy to use, help you, welcome everyone star,fork, if there is any problem can also in GitHub think I put forward, thank you for your support.

React-native-page-listview How to use