使用列表視圖
React Native 提供了一套組件,用於呈現資料列表。一般來說,你會想要使用 FlatList 或 SectionList。
FlatList
組件顯示一個滾動列表,其中包含不斷變化但結構相似的資料。FlatList
非常適合用於長列表資料,其中項目的數量可能會隨時間而變化。與更通用的 ScrollView
不同,FlatList
僅渲染當前在螢幕上顯示的元素,而不是一次渲染所有元素。
FlatList
組件需要兩個 props:data
和 renderItem
。data
是列表的資訊來源。renderItem
從來源取得一個項目,並返回一個格式化的組件以進行渲染。
這個範例建立了一個由硬編碼資料組成的基本 FlatList
。data
props 中的每個項目都渲染為一個 Text
組件。然後,FlatListBasics
組件會渲染 FlatList
和所有 Text
組件。
如果你想要渲染一組資料,並將其分成邏輯區段,也許帶有區段標題,類似於 iOS 上的 UITableView
,那麼 SectionList 就是你的最佳選擇。
列表視圖最常見的用途之一是顯示從伺服器fetch的資料。若要執行此操作,你需要瞭解 React Native 中的網路連線。