Closed zhuangxuan closed 2 years ago
这个问题验证了一下viewport.push(top); 加上这一句目前没发现什么问题,后面的同学遇到类似的问题可以参考下, 同时注意在scrollView中使用瀑布流要指定瀑布流的高度 height,高度的算法可以使用下面的算法: let height = 0; let minHeight = 0; let maxHeight = 0; let temp = 0; this.state.data.map((item)=>{ temp = minHeight + item.height; if (temp > maxHeight){ minHeight = maxHeight; maxHeight = temp; } else { minHeight = temp; } });
完整代码如下:
import React from "react"; import {WaterfallList} from "react-native-largelist-v3"; import { Text, View,ScrollView } from "react-native";
export default class WaterfallListExample extends React.Component { state = { data: data }; _list: WaterfallList;
render() { let height = 0; let minHeight = 0; let maxHeight = 0; let temp = 0; this.state.data.map((item)=>{ temp = minHeight + item.height; if (temp > maxHeight){ minHeight = maxHeight; maxHeight = temp; } else { minHeight = temp; } });
return (<ScrollView style={{backgroundColor: 'pink'}}>
<WaterfallList
style={{width:'100%',height: maxHeight}}
data={this.state.data}
ref={ref => (this._list = ref)}
heightForItem={item => item.height}
preferColumnWidth={120}
numColumns={2}
renderItem={this._renderItem}
renderHeader={this._renderHeader}
renderFooter={this._renderFooter}
onRefresh={() => {
setTimeout(() => this._list.endRefresh(), 2000);
}}
onLoading={() => {
setTimeout(() => this._list.endLoading(), 2000);
}}
/>
</ScrollView>
);
}
_renderItem = (item, index) => { return ( <View style={{ flex: 1, justifyContent: "center", alignItems: "center", height:item.height, backgroundColor: item.color }}>
</View>
);
};
_renderHeader = () => { return ( <View style={{ padding: 20, alignItems: "center", backgroundColor: "red" }}>
</View>
);
};
_renderFooter = () => { return ( <View style={{ padding: 20, alignItems: "center", backgroundColor: "red" }}>
</View>
);
}; }
const data = [ { height: 40, color: "aliceblue" }, { height: 60, color: "antiquewhite" }, { height: 80, color: "aqua" }, { height: 100, color: "aquamarine" }, { height: 120, color: "azure" }, { height: 140, color: "beige" }, { height: 160, color: "bisque" }, { height: 40, color: "blue" }, { height: 60, color: "blueviolet" }, { height: 80, color: "brown" }, { height: 100, color: "burlywood" }, { height: 120, color: "cadetblue" }, { height: 140, color: "chartreuse" }, { height: 160, color: "chocolate" }, { height: 40, color: "coral" }, { height: 60, color: "cornflowerblue" }, { height: 80, color: "cornsilk" }, { height: 100, color: "crimson" }, { height: 120, color: "cyan" }, { height: 140, color: "darkblue" }, { height: 160, color: "darkcyan" }, { height: 40, color: "aliceblue" }, { height: 60, color: "antiquewhite" }, { height: 80, color: "aqua" }, { height: 100, color: "aquamarine" }, { height: 120, color: "azure" }, { height: 140, color: "beige" }, { height: 160, color: "bisque" }, { height: 40, color: "blue" }, { height: 60, color: "blueviolet" }, { height: 80, color: "brown" }, { height: 100, color: "burlywood" }, { height: 120, color: "cadetblue" }, { height: 140, color: "chartreuse" }, { height: 160, color: "chocolate" }, { height: 40, color: "coral" }, { height: 60, color: "cornflowerblue" }, { height: 80, color: "cornsilk" }, { height: 100, color: "crimson" }, { height: 120, color: "cyan" }, { height: 140, color: "darkblue" }, { height: 160, color: "darkcyan" } ];
在这里要感谢作者的开源,给我门后来者节省了大量的时间。
bolan9999作者新年好,我有个问题请教下,谢谢,请在有空的时候回复我一下好吗.
现象描述: 将瀑布流组件放在在scrollView中展示时,当展示多个item时前面几个是空白的
代码查看: 查看了react-native-largelist/src/WaterfallList.js 代码发现,在render中有下面一段代码 summary.tops.forEach((top, index) => { const first = viewport[0]; if ( first !== undefined && top + summary.heights[index] - first > screenHeight ) { viewport.splice(0, 1); } viewport.push(top); while (summary.cells.length < viewport.length + 2) summary.cells.push(summary.cells.length); });
看起来是在计算时summary.cells.length的长度变少的原因引起的,如: 本来应该summary.cells的长度是6,可是结果是5,所以会导致空白
改动代码后: 然后在上面的代码中加一句viewport.push(top);,列表就显示正常了
我代码实际上没看懂,为什么加上viewport.push(top)会变好呢,会有隐藏的问题吗
再次感谢感谢bolan9999作者的查阅