瀑布流组件放在scrollView 中部分item空白

[zhuangxuan]

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);，列表就显示正常了

    summary.tops.forEach((top, index) => {
    //  viewport.push(top);  这一句是我随便加的，代码没弄懂
      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);
    });

我代码实际上没看懂，为什么加上viewport.push(top)会变好呢，会有隐藏的问题吗

再次感谢感谢bolan9999作者的查阅

[zhuangxuan]

[zhuangxuan]

这个问题验证了一下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 }}>

index:{index}, height:{item.height}

  </View>
);

};

_renderHeader = () => { return ( <View style={{ padding: 20, alignItems: "center", backgroundColor: "red" }}>

I am header

  </View>
);

};

_renderFooter = () => { return ( <View style={{ padding: 20, alignItems: "center", backgroundColor: "red" }}>

I am footer

  </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" } ];

[zhuangxuan]

在这里要感谢作者的开源，给我门后来者节省了大量的时间。