出处
https://github.com/Flipkart/recyclerlistview
用于解决列表性能问题
看效果
效果图
使用步骤
定义ViewType
//表示列表中会出现三种ui类型的item
const ViewTypes = {
FULL: 0,
HALF_LEFT: 1,
HALF_RIGHT: 2
}
定义DataProvider
let dataProvider = new DataProvider((r1, r2) => {
return r1 !== r2;
})
定义LayoutProvider
//第一个函数是定义item的ui类型，第二个是定义item的高宽
this._layoutProvider = new LayoutProvider(
index => {
if (index % 3 === 0) {
return ViewTypes.FULL;
} else if (index % 3 === 1) {
return ViewTypes.HALF_LEFT;
} else {
return ViewTypes.HALF_RIGHT;
}
},
(type, dim) => {
switch (type) {
case ViewTypes.HALF_LEFT:
dim.width = width / 2;
dim.height = 160;
break;
case ViewTypes.HALF_RIGHT:
dim.width = width / 2;
dim.height = 160;
break;
case ViewTypes.FULL:
dim.width = width;
dim.height = 140;
break;
default:
dim.width = 0;
dim.height = 0;
}
}
)
定义rowRenderer
//根据ui类型渲染item
_rowRenderer(type, data) {
//You can return any view here, CellContainer has no special significance
switch (type) {
case ViewTypes.HALF_LEFT:
return (
Data: {data}
);
case ViewTypes.HALF_RIGHT:
return (
Data: {data}
);
case ViewTypes.FULL:
return (
Data: {data}
);
default:
return null;
}
}
将前面定义的内容通过props传递给recyclerlistview
render() {
return