React Native原生之瀑布流取巧

     之前的文章里面有提到过瀑布流,但是这样的方式确让android界面上面卡顿等,效果不够理想。所以这个时候使用俩个listView进行这种方式,一边一个listview,然后就差高度了。高度的方式和之前一样也是获取图片的高度方式getSize获取图片高度,然后保存起来,那么进行数据对比。分为左边的和右边的,然后在区分被2求余的数。在进行左边为2余的0 高度和为h1 右边为2余数的1 高度和是 h2那个我们药进行时时对比,代码贴上

let leftMessage = 0;
        let RightMessage = 0;
        let arrayleft = []
        let arrayRight = []
        messages.map((o, i) => {
            if (i % 2 == 0) {
                leftMessage += o.Height * (width - _getWidth(32)) / 2
                arrayleft.push(o)
            }
            if (i % 2 == 1) {
                if (leftMessage <= RightMessage && i != messages.length - 1) {
                    leftMessage += o.Height * (width - _getWidth(32)) / 2
                    arrayleft.push(o)
                } else if (leftMessage - o.Height * (width - _getWidth(32)) / 2 <= RightMessage && i == messages.length - 1 && RightMessage) {
                    RightMessage += o.Height * (width - _getWidth(32)) / 2
                    arrayRight.push(o)
                }
                else {
                    RightMessage += o.Height * (width - _getWidth(32)) / 2
                    arrayRight.push(o)
                }
            }

        })
然后比较完再去导入listview里面去。效果也能做到瀑布流。性能上面相对加载500条数据左右在我的渣渣手机上面会有点卡了

你可能感兴趣的:(React,Native)