RN的0.43版終於出來了，現在大家期待已久的listview的升級版flatlist終於跟大家見面了，我也是關注了好久哦，現在將使用說明，和例子給大家簡單的講解下。
簡單的講解下api：
flatlist在數據量很大的情況下，比listview性能要高好多哦，就是基於組件<VirtualizedList>的封裝，具體的api大家可以看中文網的介紹：http://reactnative.cn/docs/0.43/flatlist.html#content。
這裏就不介紹有哪些api了，這裏介紹下具體的使用方法：
先看下圖吧
上面的內容是FB的uiexplorer裏面的例子，代碼可以查看FlatListExample，下面分析下源碼：
一、首先引入了ListExampleShared封裝的一些小組件，
裏面有：
FooterComponent, //這是flatlist底部的組件，相當於listview的renderFooter
HeaderComponent, // 這是flatlist頭部組件
ItemComponent, // 這是每一條數據要顯示的內容
PlainInput, //這是對textinput的一個簡單封裝
SeparatorComponent, // 這是行組件之間的分割符，可以自定義
Spindicator, //這是一個旋轉的指示器，一個簡單的動畫
genItemData, //這是數據源，裏面是一個datablob
getItemLayout,
pressItem,
renderSmallSwitchOption,
二、創建FlatList動畫
const AnimatedFlatList = Animated.createAnimatedComponent(FlatList);
三、render具體的代碼
其他的代碼略過了，render方法裏面的AnimatedFlatList就是主要的內容，其中內部的前三個（ItemSeparatorComponent、ListHeaderComponent、ListFooterComponent）就不在介紹了。
3.1、data是數據源，這裏用的是正則匹配，因爲最開始的圖內部有textinput搜索，搜索的內容配到到數據源中並顯示出來，數據源的代碼如下：
const filterRegex = newRegExp ( String(this.state.filterText),'i' );
const filter = (item)=>(
filterRegex.test(item.text) || filterRegex.test(item.title)
);
const filteredData = this.state.data.filter(filter);
這個filteredData就是數據源了，但是現在有個問題是隻能匹配到已經渲染出來的數據，這個例子中初始的數據是100條，假設你輸入了101，就匹配不到了。
3.2、debug是否是開發模式。
3.3、disableVirtualization只有在debug模式下才打開( true )，這是個boolean值，用來優化內存和顯示用的，也就是在render window外面完全卸載react實例的
3.4、getItemLayout是在item固定高度的時候才用的，如果指定了SeparatorComponent，分割線的尺寸也要算到offset中
3.5、horizontal 是否是水平佈局
3.6、legacyImplementation設置爲true則使用舊的ListView的實現。
3.7、numColumns是佈局的列數，這裏是1
3.8、onEndReached是滑動到底部的回調函數，這裏做的是在數據源中再添加100條數據
3.9、onRefresh下拉刷新的回調
3.10、onScroll滑動時的回調，對應的偏移量設置，這裏還用到原生加速
3.11、onViewableItemsChanged可見區域發生變化的回調，是由viewablePercentThreshold屬性定義的，實例中的代碼是打印可見區域內變化的item
3.12、refreshing是否刷新
3.13、renderItem：單個item組件的渲染
3.14、viewabilityConfig這是view的配置項，在ViewabilityHelper裏面，有四個可配置項，（minimumViewTime、viewAreaCoveragePercentThreshold、itemVisiblePercentThreshold、waitForInteraction）
四、SectionList
這個是帶有固定頭部的list，和listview的renderSectionHeader提供類似的功能，具體大家可以看下SectionList，
這裏就不詳細講解了，更深入的瞭解，大家還是看下react-native下面的源碼吧