之前使用的组件是listview，当时要添加一个下拉刷新，上拉加载的功能，所以对listview做了一些封装，但是后来看官方文档，不建议再使用listview，因为效率问题，做过android的朋友都知道，android的listview如果不自己处理一下，也是有效率问题的。所以官方又推出了flatlist，而且自带上拉下拉的功能。
功能简介
如果需要分组/类/区（section），请使用sectionlist(这个我们会在之后的文章中介绍)
使用
flatlist如果只做简单使用也是很简单的，这里我们会分难以程度，逐渐介绍：
直接使用
我要评论
<flatlist
data={[{key: 'a'}, {key: 'b'}]}
renderitem={({item}) => <text>{item.key}</text>}
/>
可以看出跟之前的listview很像，但是其中少了datasource，这里，我们只需要传递数据，其它的都交给flatlist处理好了。
属性说明
方法
scrolltoend
滚动到底部。如果不设置getitemlayout
属性的话，可能会比较卡。
scrolltoindex
滚动到指定index的item
如果不设置getitemlayout
属性的话，无法跳转到当前可视区域以外的位置。
scrolltoitem
滚动到指定item，如果不设置getitemlayout
属性的话，可能会比较卡。
scrolltooffset
滚动指定距离
demo：
import react, {component} from 'react';
import {
stylesheet,
view,
flatlist,
text,
button,
} from 'react-native';
var item_height = 100;
export default class flatlistdemo extends component {
_flatlist;
_renderitem = (item) => {
var txt = '第' + item.index + '个' + ' title=' + item.item.title;
var bgcolor = item.index % 2 == 0 ? 'red' : 'blue';
return <text style={[{flex:1,height:item_height,backgroundcolor:bgcolor},styles.txt]}>{txt}</text>
}
_header = () => {
return <text style={[styles.txt,{backgroundcolor:'black'}]}>这是头部</text>;
}
_footer = () => {
return <text style={[styles.txt,{backgroundcolor:'black'}]}>这是尾部</text>;
}
_separator = () => {
return <view style={{height:2,backgroundcolor:'yellow'}}/>;
}
render() {
var data = [];
for (var i = 0; i < 100; i++) {
data.push({key: i, title: i + ''});
}
return (
<view style={{flex:1}}>
<button title='滚动到指定位置' onpress={()=>{
//this._flatlist.scrolltoend();
//this._flatlist.scrolltoindex({viewposition:0,index:8});
this._flatlist.scrolltooffset({animated: true, offset: 2000});
}}/>
<view style={{flex:1}}>
<flatlist
ref={(flatlist)=>this._flatlist = flatlist}
listheadercomponent={this._header}
listfootercomponent={this._footer}
itemseparatorcomponent={this._separator}
renderitem={this._renderitem}
//numcolumns ={3}
//columnwrapperstyle={{borderwidth:2,bordercolor:'black',paddingleft:20}}
//horizontal={true}
//getitemlayout={(data,index)=>(
//{length: item_height, offset: (item_height+2) * index, index}
//)}
//onendreachedthreshold={5}
//onendreached={(info)=>{
//console.warn(info.distancefromend);
//}}
//onviewableitemschanged={(info)=>{
//console.warn(info);
//}}
data={data}>
</flatlist>
</view>
</view>
);
}
}
const styles = stylesheet.create({
txt: {
textalign: 'center',
textalignvertical: 'center',
color: 'white',
fontsize: 30,
}
});
效果图：
进阶使用
在这里我准备了一份代码示例：
const {width,height}=dimensions.get('window')
export default class main extends component{
// 构造
constructor(props) {
super(props);
}
refreshing(){
let timer = settimeout(()=>{
cleartimeout(timer)
alert('刷新成功')
},1500)
}
_onload(){
let timer = settimeout(()=>{
cleartimeout(timer)
alert('加载成功')
},1500)
}
render() {
var data = [];
for (var i = 0; i < 100; i++) {
data.push({key: i, title: i + ''});
}
return (
<view style={{flex:1}}>
<button title='滚动到指定位置' onpress={()=>{
this._flatlist.scrolltooffset({animated: true, offset: 2000});
}}/>
<view style={{flex:1}}>
<flatlist
ref={(flatlist)=>this._flatlist = flatlist}
listheadercomponent={this._header}
listfootercomponent={this._footer}
itemseparatorcomponent={this._separator}
renderitem={this._renderitem}
onrefresh={this.refreshing}
refreshing={false}
onendreachedthreshold={0}
onendreached={
this._onload
}
numcolumns ={3}
columnwrapperstyle={{borderwidth:2,bordercolor:'black',paddingleft:20}}
//horizontal={true}
getitemlayout={(data,index)=>(
{length: 100, offset: (100+2) * index, index}
)}
data={data}>
</flatlist>
</view>
</view>
);
}
_renderitem = (item) => {
var txt = '第' + item.index + '个' + ' title=' + item.item.title;
var bgcolor = item.index % 2 == 0 ? 'red' : 'blue';
return <text style={[{flex:1,height:100,backgroundcolor:bgcolor},styles.txt]}>{txt}</text>
}
_header = () => {
return <text style={[styles.txt,{backgroundcolor:'black'}]}>这是头部</text>;
}
_footer = () => {
return <text style={[styles.txt,{backgroundcolor:'black'}]}>这是尾部</text>;
}
_separator = () => {
return <view style={{height:2,backgroundcolor:'yellow'}}/>;
}
}
const styles=stylesheet.create({
container:{
},
content:{
width:width,
height:height,
backgroundcolor:'yellow',
justifycontent:'center',
alignitems:'center'
},
cell:{
height:100,
backgroundcolor:'purple',
alignitems:'center',
justifycontent:'center',
borderbottomcolor:'#ececec',
borderbottomwidth:1
},
txt: {
textalign: 'center',
textalignvertical: 'center',
color: 'white',
fontsize: 30,
}
})
运行效果如下：
总结
总体来说flatlist还是比listview用起来方便的，而且提供的功能更多。
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持移动技术网。
如对本文有疑问， 点击进行留言回复！！
vue源码实战render.js与$nextTick的异步调用
网友评论