React Native的ListView的布局使用


1>

ListView組件用於顯示一個垂直的滾動列表,其中的元素之間結構近似而僅數據不同。

ListView更適於長列表數據,且元素個數可以增刪。和ScrollView不同的是,ListView並不立即渲染所有元素,而是優先渲染屏幕上可見的元素。

ListView組件必須的兩個屬性是dataSourcerenderRowdataSource是列表的數據源,而renderRow則逐個解析數據源中的數據,然后返回一個設定好格式的組件來渲染。

下面的例子創建了一個簡單的ListView,並預設了一些模擬數據。首先是初始化ListView所需的dataSource,其中的每一項(行)數據之后都在renderRow中被渲染成了Text組件,最后構成整個ListView

rowHasChanged函數也是ListView的必需屬性。這里我們只是簡單的比較兩行數據是否是同一個數據(===符號只比較基本類型數據的值,和引用類型的地址)來判斷某行數據是否變化了。

 

2>ListView相關屬性:

 

ScrollView props... #

譯注:這意味着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.代碼實現:

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM