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} />
renderRow
method 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>);}
refresh
Array 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} />
pageLen
Specifies how many data you can get each time you call the backend paging interface.
renderRow
Use the same method as above to render the display of each line.
refresh
The 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); });}
loadMore
The 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
.
pullState
The 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