Migrating from ListView to FlatList in React Native. Raw

ListView to FlatList.diff

diff --git a/app/containers/Search.js b/app/containers/Search.js
index 6a742f5..d75a738 100644
--- a/app/containers/Search.js
+++ b/app/containers/Search.js
@@ -7,6 +7,7 @@ import {
   Dimensions,
   TouchableOpacity,
   ListView,
+  FlatList,
   ScrollView
 } from 'react-native';
 import { observable, computed } from 'mobx';
@@ -242,14 +243,14 @@ export default class Search extends React.Component {
           {this.state.loading ? (<Loading zIndex={102} top={200}/>) : (
             <View>
               {this.state.data && this.state.data.items.length > 0 ? (
-                <ListView
+                <FlatList
                   contentContainerStyle={styles.contentBlock}
-                  dataSource={this.dataSource.cloneWithRows(this.state.data.items)}
+                  data={this.state.data.items}
+                  keyExtractor={item => item.id}
                   onEndReached={this.onEndReach.bind(this)}
-                  onEndReachedThreshold={10}
-                  renderFooter={this._renderMoreFooter()}
-                  enableEmptySections={true}
-                  renderRow={(data) => this._renderItem(data, navigate)}
+                  onEndReachedThreshold={1}
+                  ListFooterCompontent={this._renderMoreFooter()}
+                  renderItem={(data) => this._renderItem(data.item, navigate)}
                 />
               ) : (
                 <View style={[styles.searchTips, !this.state.showSelect && styles.showSearchContent]}>

有两个问题：

1. onEndReached 触发过早
2. footer loading 没显示