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條資料左右在我的渣渣手機上面會有點卡了