跳到主要內容

使用列表視圖

React Native 提供了一套組件,用於呈現資料列表。一般來說,你會想要使用 FlatListSectionList

FlatList 組件顯示一個滾動列表,其中包含不斷變化但結構相似的資料。FlatList 非常適合用於長列表資料,其中項目的數量可能會隨時間而變化。與更通用的 ScrollView 不同,FlatList 僅渲染當前在螢幕上顯示的元素,而不是一次渲染所有元素。

FlatList 組件需要兩個 props:datarenderItemdata 是列表的資訊來源。renderItem 從來源取得一個項目,並返回一個格式化的組件以進行渲染。

這個範例建立了一個由硬編碼資料組成的基本 FlatListdata props 中的每個項目都渲染為一個 Text 組件。然後,FlatListBasics 組件會渲染 FlatList 和所有 Text 組件。

如果你想要渲染一組資料,並將其分成邏輯區段,也許帶有區段標題,類似於 iOS 上的 UITableView,那麼 SectionList 就是你的最佳選擇。

列表視圖最常見的用途之一是顯示從伺服器fetch的資料。若要執行此操作,你需要瞭解 React Native 中的網路連線