【React Native】文件翻譯閱讀紀錄 - Components(組件) - ListView
 |
| Facebook Open Source React Native |
ListView
DEPRECATED - 使用其中一個新的列表組件，例如FlatList或SectionList，用於有限內存使用，更少的錯誤，更好的性能，更易於使用的API以及更多功能。查看此博客文章了解更多詳情。
ListView - 一個核心組件，旨在高效顯示垂直滾動的更改數據列表。最小的API是創建ListView.DataSource，使用簡單的數據blob數組填充它，並使用該數據源和renderRow回調實例化ListView組件，該回調從數據數組中獲取blob並返回可渲染組件。
ListView - 一個核心組件，旨在高效顯示垂直滾動的更改數據列表。最小的API是創建ListView.DataSource，使用簡單的數據blob數組填充它，並使用該數據源和renderRow回調實例化ListView組件，該回調從數據數組中獲取blob並返回可渲染組件。
最小的例子:
class MyComponent extends Component {
constructor() {
super();
const ds = new ListView.DataSource({rowHasChanged: (r1, r2) => r1 !== r2});
this.state = {
dataSource: ds.cloneWithRows(['row 1', 'row 2']),
};
}
render() {
return (
<ListView
dataSource={this.state.dataSource}
renderRow={(rowData) => <Text>{rowData}</Text>}
/>
);
}
}
ListView還支持更多高級功能，包括具有粘性節標題，頁眉和頁腳支持的部分，到達可用數據末尾的回調（onEndReached）以及在設備視口更改中可見的行集（onChangeVisibleRows），以及幾個性能優化。
有一些性能操作旨在使ListView平滑滾動，同時動態加載可能非常大（或概念上無限）的數據集：
有一些性能操作旨在使ListView平滑滾動，同時動態加載可能非常大（或概念上無限）的數據集：
- 只重新渲染已更改的行 - 提供給數據源的rowHasChanged函數告訴ListView是否需要重新渲染行，因為源數據已更改 - 有關詳細信息，請參閱ListViewDataSource。
- 速率限制行渲染 - 默認情況下，每個事件循環只渲染一行（使用pageSize prop自定義）。這會將工作分解為更小的塊，以減少渲染行時丟幀的可能性。
Props
dataSourceinitialListSizeonEndReachedThresholdpageSizerenderRowrenderScrollComponentscrollRenderAheadDistancestickyHeaderIndicesenableEmptySectionsrenderHeaderonEndReachedstickySectionHeadersEnabledrenderSectionHeaderrenderSeparatoronChangeVisibleRowsremoveClippedSubviewsrenderFooter
Methods
參考
Props
dataSource
要使用的 ListView.DataSource 的實例
| TYPE | REQUIRED |
|---|---|
| ListViewDataSource | Yes |
initialListSize
初始組件裝載時要渲染的行數。使用此選項可以使第一個屏幕的數據一次出現，而不是在多個幀的過程中出現。
| TYPE | REQUIRED |
|---|---|
| number | Yes |
onEndReachedThreshold
用於調用onEndReached的像素閾值（虛擬，非物理）。
| TYPE | REQUIRED |
|---|---|
| number | Yes |
pageSize
每個事件循環呈現的行數。注意：如果您的'行'實際上是單元格，即它們沒有跨越視圖的整個寬度（如在ListViewGridLayoutExample中），則應將pageSize設置為每行單元格數的倍數，否則您'在加載新頁面時，可能會在ListView的邊緣看到間隙。
| TYPE | REQUIRED |
|---|---|
| number | Yes |
renderRow
(rowData, sectionID, rowID, highlightRow) => renderable
從數據源及其ID中獲取數據條目，並應返回可呈現為行的可呈現組件。默認情況下，數據正是放入數據源的數據，但也可以提供自定義提取器。通過調用highlightRow（sectionID，rowID）突出顯示行時，可以通知ListView。這將在renderSeparator中設置adjacentRowHighlighted的布爾值，允許您控制突出顯示的行上方和下方的分隔符。可以通過調用highlightRow（null）重置行的突出顯示狀態。
| TYPE | REQUIRED |
|---|---|
| function | Yes |
renderScrollComponent
(props) => renderable
一個函數，它返回呈現列表行的可滾動組件。默認使用給定的props返回ScrollView。
| TYPE | REQUIRED |
|---|---|
| function | Yes |
scrollRenderAheadDistance
在行進入屏幕之前開始渲染行的時間，以像素為單位。
| TYPE | REQUIRED |
|---|---|
| number | Yes |
stickyHeaderIndices
一組子索引，用於確定滾動時哪些子項停靠在屏幕頂部。例如，傳遞stickyHeaderIndices = {[0]}將導致第一個子項固定到滾動視圖的頂部。與horizontal = {true}不支持此屬性。
| TYPE | REQUIRED |
|---|---|
| array of number | Yes |
enableEmptySections
指示是否應呈現空節標題的標誌。在將來版本中，默認情況下將呈現空節標題，並且不推薦使用該標誌。如果不希望渲染空部分，則應從sectionID對像中排除其索引。
| TYPE | REQUIRED |
|---|---|
| bool | No |
renderHeader
| TYPE | REQUIRED |
|---|---|
| function | No |
onEndReached
在所有行都已渲染並且列表已滾動到底部的onEndReachedThreshold內時調用。提供了本機滾動事件。
| TYPE | REQUIRED |
|---|---|
| function | No |
stickySectionHeadersEnabled
使節標頭變粘。粘性行為意味著它將與該部分頂部的內容一起滾動，直到它到達屏幕頂部，此時它將粘到頂部，直到它被下一部分標題推離屏幕。與horizontal = {true}不支持此屬性。僅在iOS上默認啟用，因為典型的平台標準。
| TYPE | REQUIRED |
|---|---|
| bool | No |
renderSectionHeader
(sectionData, sectionID) => renderable
如果提供，則為此部分呈現標題。
| TYPE | REQUIRED |
|---|---|
| function | No |
renderSeparator
(sectionID, rowID, adjacentRowHighlighted) => renderable
如果提供，則可渲染組件將在每行下方呈現為分隔符，但如果下面有節標題則不會呈現最後一行。獲取上面一行的sectionID和rowID以及它的相鄰行是否突出顯示。
| TYPE | REQUIRED |
|---|---|
| function | No |
onChangeVisibleRows
(visibleRows, changedRows) => void
當可見行集更改時調用。 visibleRows為所有可見行映射{sectionID：{rowID：true}}，並且changedRows映射{sectionID：{rowID：true | false}用於已更改其可見性的行，其中true表示可見，false表示視圖已移出視圖。
| TYPE | REQUIRED |
|---|---|
| function | No |
removeClippedSubviews
用於改進大型列表的滾動性能的性能優化，與溢出一起使用：行容器上的“隱藏”。默認情況下啟用此功能。
| TYPE | REQUIRED |
|---|---|
| bool | No |
renderFooter
() => renderable
在每個渲染過程中始終呈現頁眉和頁腳（如果提供了這些道具）。如果重新渲染它們很昂貴，請將它們包裝在StaticContainer或其他適當的機制中。在每個渲染過程中，頁腳始終位於列表的底部，標題位於頂部。在水平ListView中，標題在左側呈現，頁腳在右側呈現。
| TYPE | REQUIRED |
|---|---|
| function | No |
Methods
getMetrics()
getMetrics();
導出一些數據，例如用於性能調查或分析。
scrollTo()
scrollTo(...args: Array)
立即或使用平滑動畫滾動到給定的x，y偏移。
See
ScrollView#scrollTo.
scrollToEnd()
scrollToEnd(([options]: object));
如果這是一個垂直ListView滾動到底部。如果這是一個水平ListView滾動到右邊。
使用scrollToEnd（{animated：true}）進行平滑的動畫滾動，使用scrollToEnd（{animated：false}）進行即時滾動。如果未傳遞任何選項，則動畫默認為true。
使用scrollToEnd（{animated：true}）進行平滑的動畫滾動，使用scrollToEnd（{animated：false}）進行即時滾動。如果未傳遞任何選項，則動畫默認為true。
See
ScrollView#scrollToEnd.
flashScrollIndicators()
flashScrollIndicators();
暫時顯示滾動指示器。
0 意見