在認識FlatList之前一直在scrollview組件中遨游,因為scrollview這個組件用起來真的好簡單!然而,某一天寫需求,要分兩列展示信息,scrollview死活寫不出來,難道我要用view一左一右各寫一個么......這樣填數(shù)據(jù)豈不是要死了~~萬能的百度搜出來這么個神奇的組件——FlatList.原諒我這都要百度,因為真的太小白了!
對于FlatList,官網(wǎng)上是這么夸的:
高性能的簡單列表組件!支持如下常用功能:
1.完全跨平臺;
2.支持水平布局模式;
3.行組件顯示或隱藏時可配置回調事件;
4.支持單獨的頭部組件;
5.支持單獨的尾部組件;
6.支持自定義行間分隔線;
7.支持下拉刷新;
8.支持上拉加載;
9.支持跳轉到指定行.
如果需要分組/類/區(qū),請使用<SectionList>.(對于SectionList后面單獨記錄).
下面詳細說名我自己使用過程中遇到的問題
屬性
介紹幾個比較重要的屬性:?
data: 列表的數(shù)據(jù)源,js中就是一個array數(shù)組;
numColumns: 顯示的列數(shù);
renderItem: 從數(shù)據(jù)源中逐個解析數(shù)據(jù),然后返回一個設定好格式的組件來渲染;
keyExtractor:?用于為給定的item生成一個不重復的key曙求。若不指定此函數(shù)碍庵，則默認抽取item.key作為key值。若item.key也不存在悟狱，則使用數(shù)組下標index静浴。
??注意: data接收的數(shù)組,需要寫成{key:'value'}的形式;
? ??????????????renderItem綁定數(shù)據(jù)的格式為:renderItem={({item}) => 你的子item的組件}，獲取數(shù)據(jù)調用item.key的形式.
? ??????????????keyExtractor一般的使用方式:
? ? ? ? ? ? ? ? ? ? ? ?_keyExtractor=(item, index)=> index;
????????????????????<FlatList ? ?keyExtractor={this._keyExtractor} />
下面是具體的實現(xiàn)步驟:?
一.引入相關組件
二.創(chuàng)建數(shù)據(jù)源
這里注意‘key: 'a'’,我們在設置data的時候,必須要為item設置key值,并且每一個key都是唯一的.原因就在于FlatList的keyExtractor屬性.如果不設置的話就必須要制定keyExtractor.為了保險起見,兩個都寫上!
三.使用
renderItem中return出來的是子組件,自行定義即可.
最終顯示的效果:
