1>
ListView組件用於顯示一個垂直的滾動列表,其中的元素之間結構近似而僅數據不同。
ListView更適於長列表數據,且元素個數可以增刪。和ScrollView不同的是,ListView並不立即渲染所有元素,而是優先渲染屏幕上可見的元素。
ListView組件必須的兩個屬性是dataSource和renderRow。dataSource是列表的數據源,而renderRow則逐個解析數據源中的數據,然后返回一個設定好格式的組件來渲染。
下面的例子創建了一個簡單的ListView,並預設了一些模擬數據。首先是初始化ListView所需的dataSource,其中的每一項(行)數據之后都在renderRow中被渲染成了Text組件,最后構成整個ListView。
rowHasChanged函數也是ListView的必需屬性。這里我們只是簡單的比較兩行數據是否是同一個數據(===符號只比較基本類型數據的值,和引用類型的地址)來判斷某行數據是否變化了。
2>ListView相關屬性:
譯注:這意味着ListView可以使用所有ScrollView的屬性。
dataSource ListViewDataSource #
ListView.DataSource實例(列表依賴的數據源)
initialListSize number #
指定在組件剛掛載的時候渲染多少行數據。用這個屬性來確保首屏顯示合適數量的數據,而不是花費太多幀逐步顯示出來。
onChangeVisibleRows function #
(visibleRows, changedRows) => void
當可見的行的集合變化的時候調用此回調函數。visibleRows 以 { sectionID: { rowID: true }}的格式包含了所有可見行,而changedRows 以{ sectionID: { rowID: true | false }}的格式包含了所有剛剛改變了可見性的行,其中如果值為true表示一個行變得可見,而為false表示行剛剛離開可視區域而變得不可見。
onEndReached function #
當所有的數據都已經渲染過,並且列表被滾動到距離最底部不足onEndReachedThreshold個像素的距離時調用。原生的滾動事件會被作為參數傳遞。譯注:當第一次渲染時,如果數據不足一屏(比如初始值是空的),這個事件也會被觸發。
onEndReachedThreshold number #
調用onEndReached之前的臨界值,單位是像素。
pageSize number #
每次事件循環(每幀)渲染的行數。
removeClippedSubviews bool #
用於提升大列表的滾動性能。需要給行容器添加樣式overflow:'hidden'。(Android已默認添加此樣式)。此屬性默認開啟。
renderFooter function #
() => renderable
頁頭與頁腳會在每次渲染過程中都重新渲染(如果提供了這些屬性)。如果它們重繪的性能開銷很大,把他們包裝到一個StaticContainer或者其它恰當的結構中。頁腳會永遠在列表的最底部,而頁頭會在最頂部。
renderHeader function #
renderRow function #
(rowData, sectionID, rowID, highlightRow) => renderable
從數據源(Data source)中接受一條數據,以及它和它所在section的ID。返回一個可渲染的組件來為這行數據進行渲染。默認情況下參數中的數據就是放進數據源中的數據本身,不過也可以提供一些轉換器。
如果某一行正在被高亮(通過調用highlightRow函數),ListView會得到相應的通知。當一行被高亮時,其兩側的分割線會被隱藏。行的高亮狀態可以通過調用highlightRow(null)來重置。
renderScrollComponent function #
(props) => renderable
指定一個函數,在其中返回一個可以滾動的組件。ListView將會在該組件內部進行渲染。默認情況下會返回一個包含指定屬性的ScrollView。
renderSectionHeader function #
(sectionData, sectionID) => renderable
如果提供了此函數,會為每個小節(section)渲染一個粘性的標題。
粘性是指當它剛出現時,會處在對應小節的內容頂部;繼續下滑當它到達屏幕頂端的時候,它會停留在屏幕頂端,一直到對應的位置被下一個小節的標題占據為止。
renderSeparator function #
(sectionID, rowID, adjacentRowHighlighted) => renderable
如果提供了此屬性,一個可渲染的組件會被渲染在每一行下面,除了小節標題的前面的最后一行。在其上方的小節ID和行ID,以及鄰近的行是否被高亮會作為參數傳遞進來。
scrollRenderAheadDistance number #
當一個行接近屏幕范圍多少像素之內的時候,就開始渲染這一行。
ios--stickyHeaderIndices [number] #
一個子視圖下標的數組,用於決定哪些成員會在滾動之后固定在屏幕頂端。舉個例子,傳遞stickyHeaderIndices={[0]}會讓第一個成員固定在滾動視圖頂端。這個屬性不能和horizontal={true}一起使用。
方法#
getMetrics()
3.代碼實現: