陣營本地創建一個高性能網格

Question

在我的應用程序，我需要創建一個網格狀的截圖：

Grid that i want

細胞的寬度和數量取決於在上面選定的日期。 每個細胞都應該處理觸摸（在左邊傳遞時間戳和數字）。

目前我使用來自react-native的簡單「視圖」組件，其左側和頂部都有邊框。 當我點擊頂部的日期大約需要0.5 - 1秒（取決於細胞數量）來重新渲染。 有沒有更高效的方法來製作這樣的網格？

謝謝！

Answer 1

創建高性能網格和重複數據塊的推薦方式是ListView或FlatList組件。我對FlatList沒有任何經驗，因爲它非常新，但ListView具有優化功能，只需渲染屏幕上當前的元素即可進行渲染。

我相信這兩個元素都可以進行垂直或水平滾動，但我不認爲他們都可以做到這一點。對此沒有正面評價。

如果您需要水平和垂直滾動，您可能需要將列表組件包裝在滾動視圖中。基本上，即使它比屏幕大，你也可以根據需要製作清單。列表本身處理垂直滾動，滾動視圖處理水平滾動（如果寬度比較高，則反之亦然）。

此外，也有不少性能提升，你可以考慮爲陣營：

• 陣營16可能是你更快，因爲它有一個新的版本比較引擎，並允許在渲染引擎優先。
• 您可以嘗試創建自定義shouldComponentUpdate函數。
• 我也看到人們聲稱性能增強，因爲他們沒有將重複組件（網格中的單元格）放在類中，而是使用純函數。不幸的是，我現在不能
• 等

Answer 2

，最好的辦法來實現網格使用FlatList成分，它建議在此（見here）調高博客文章。您可以使用numColumns和columnWrapperStyle屬性並將它們應用於一個變量以動態設置網格的樣式。 FlatList易於使用，你可以看到一個偉大的文件和有用的例子here。