React Native之FlatList，listview的升級版
RN的0.43版終於出來了，現在大家期待已久的listview的升級版flatlist終於跟大家見面了，我也是關注了好久哦，現在將使用說明，和例子給大家簡單的講解下。http://www.jianshu.com/p/37f7a3d4f114
簡單的講解下api：
flatlist在資料量很大的情況下，比listview效能要高好多哦，就是基於元件<VirtualizedList>的封裝，具體的api大家可以看中文網的介紹：http://reactnative.cn/docs/0.43/flatlist.html#content。
這裡就不介紹有哪些api了，這裡介紹下具體的使用方法：
先看下圖吧
flatlist debug模式
flatlist
上面的內容是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程式碼
其他的程式碼略過了，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下面的原始碼吧