React Native之FlatList的介紹與使用實例

功能簡介

FlatList高性能的簡單列表組件，支持下面這些常用的功能：

• 完全跨平台。
• 支持水平布局模式。
• 行組件顯示或隱藏時可配置回調事件。
• 支持單獨的頭部組件。
• 支持單獨的尾部組件。
• 支持自定義行間分隔線。
• 支持下拉刷新。
• 支持上拉加載。
• 支持跳轉到指定行（ScrollToIndex）。

如果需要分組/類/區（section），請使用<SectionList>。

1. FlatList和SectionList都是以VirtualizedList為底層實現的，FlatList 更高的靈活性（比如說在使用 immutable data 而不是 普通數組）的時候，你才應該考慮使用VirtualizedList。
2. Vritualization 通過維護一個有限的渲染窗口（其中包含可見的元素），並將渲染窗口之外的元素全部用合適的定長空白空間代替的方式，極大的改善了內存消耗以及在有大量數據情況下的使用性能。這個渲染窗口能響應滾動行為。當一個元素離可視區太遠時，它就有一個較低優先級；否則就獲得一個較高的優先級。渲染窗口通過這種方式逐步渲染其中的元素（在進行了任何交互之后），以盡量減少出現空白區域的可能性。

屬性說明

1. ItemSeparatorComponent：分割線組件,不會出現在第一行之前和最后一行之后。 
2. ListFooterComponent：結尾組件 
3. ListHeaderComponent：頭組件 
4. ListEmptyComponent:列表為空時渲染該組件。可以是React Component, 也可以是一個render函數， 或者渲染好的element。
5. extraData：如果有除data以外的數據用在列表中（不論是用在renderItem還是Header或者Footer中），請在此屬性中指定。同時此數據在修改時也需要先修改其引用地址（比如先復制到一個新的Object或者數組中），然后再修改其值，否則界面很可能不會刷新。
6. getItem:獲取每個Item
7. getItemCount:獲取Item屬相
8. initialNumToRender:指定一開始渲染的元素數量，最好剛剛夠填滿一個屏幕，這樣保證了用最短的時間給用戶呈現可見的內容。注意這第一批次渲染的元素不會在滑動過程中被卸載，這樣是為了保證用戶執行返回頂部的操作時，不需要重新渲染首批元素。
9. initialScrollIndex:指定渲染開始的item index
10. keyExtractor:此函數用於為給定的item生成一個不重復的key。Key的作用是使React能夠區分同類元素的不同個體，以便在刷新時能夠確定其變化的位置，減少重新渲染的開銷。若不指定此函數，則默認抽取item.key作為key值。若item.key也不存在，則使用數組下標。
11. legacyImplementation:設置為true則使用舊的ListView的實現。
12. numColumns:多列布局只能在非水平模式下使用，即必須是horizontal={false}。此時組件內元素會從左到右從上到下按Z字形排列，類似啟用了flexWrap的布局。組件內元素必須是等高的——暫時還無法支持瀑布流布局。
13. onEndReached:當列表被滾動到距離內容最底部不足onEndReachedThreshold的距離時調用。
14. onEndReachedThreshold:決定當距離內容最底部還有多遠時觸發onEndReached回調。注意此參數是一個比值而非像素單位。比如，0.5表示距離內容最底部的距離為當前列表可見長度的一半時觸發。
15. onRefresh:如果設置了此選項，則會在列表頭部添加一個標准的RefreshControl控件，以便實現“下拉刷新”的功能。同時你需要正確設置refreshing屬性。
16. onViewableItemsChanged:在可見行元素變化時調用。可見范圍和變化頻率等參數的配置請設置viewabilityconfig屬性.
17. refreshing:在等待加載新數據時將此屬性設為true，列表就會顯示出一個正在加載的符號。renderItem:根據行數據data，渲染每一行的組件。
18. data：列表數據 
19. horizontal：設置為true則變為水平列表,默認false。 
20. columnWrapperStyle：numColumns大於1時，設置每行的樣式 
21. getItemLayout：如果我們知道行高可以用此方法節省動態計算行高的開銷。 
22. refreshing：是否正在加載數據 
23. onRefresh：設置此屬性需要一個標准的 RefreshControl 控件，刷新數據 
24. renderItem：渲染每個組件 
25. onViewableItemsChanged：當一個新的Item渲染或者隱藏 的時候調用此方法。參數：info: {viewableItems: Array, changed: Array} viewableItems：當前可見的Item，changed：渲染或者隱藏的Item。 
26. androidprogressViewOffset?: number :當需要在指定的偏移內顯示加載指示器的時候，就可以設置這個值。

 

 方法

1. scrollToEnd:滾動到底部。如果不設置getItemLayout屬性的話，可能會比較卡。
2. scrollToIndex:滾動到指定index的item如果不設置getItemLayout屬性的話，無法跳轉到當前可視區域以外的位置。
3. scrollToItem:滾動到指定item，如果不設置getItemLayout屬性的話，可能會比較卡。
4. scrollToOffset:滾動指定距離

使用實例

 <FlatList
  data={Details}
  keyExtractor={(item, index) => index}
  renderItem={this.renderRow}
  ListEmptyComponent={()=>{return(<Text style={styles.LookMoreStyle}>暫無記錄</Text>)}}
  // getItemLayout={(data,index)=>(
  //     {length: AdaptationModel.scaleHeight(46), offset:AdaptationModel.scaleHeight(46) * index, index}
  //     )}
/>

const styles = StyleSheet.create({
 LookMoreStyle: {
        height: 32,
        width: AppSetting.ScreenWidth,
        textAlign: 'center',
        fontSize: AdaptationModel.setSpText(12),
        paddingTop: 10,
        backgroundColor: AppSetting.GRAY
    },
})