关于React Native中FlatList的onEndReached属性频繁调用的一种解决办法

FlatList组件是RN0.43后引入的组件。作为高性能列表组件，FlatList在ListView的基础上优化了加载性能并简化了渲染过程。不仅如此，该组件还提供了onRefresh和onEndReached属性，用来定义上拉和下拉的功能。然而笔者发现，当FlatList组件的父组件高度不为定值的时候，onEndReached属性调用会出现问题，List并未滑到底部就会被频繁触发，导致功能异常。通常我们会使用Flexbox弹性盒布局，不会给列表组件设置固定width和height值，因此出现这种问题很可能是FlatList不能够正确的判断是否到达容器底部。

 <View style={{flex:1}}>
     <FlatList data={this.props.data}
         renderItem={({item})=>{
         return (<MyItem data={item} clickItem={()=>{
                 this.props.getItem(item);
             }}/>);
         }}
         onEndReached{()=>{
             this.props.loadMore();
         }}/>
 </View>

这种情况下我们可以使用ScrollView的属性手动判断容器底部，因为当我们打开官方关于FlatList组件的介绍（https://facebook.github.io/react-native/docs/flatlist）时，我们发现它继承了ScrollView所有的属性。紧接着，我们找到onScroll和onContentSizeChange属性来代替原来的onEndReached和onEndReachedThreshold(IOS)属性。实现如下：

 constructor(props){
     super(props);
     this.state={
         loading:false
     }
 }
 --------------------------以下属性添加到FlatList中--------------------------
 onScroll={(event)=>{
     let offsetY = event.nativeEvent.contentOffset.y;
     let contentHeight = event.nativeEvent.contentSize.height;
     let originHeight = event.nativeEvent.layoutMeasurement.height;
     if(!this.state.loading){
         if(offsetY+originHeight+200>=contentHeight){
             this.setState({
                 loading:true,
             });
             this.props.loadMore();
         }
     }
     console.log(this.state.loading+","+offsetY);
 }}
 onContentSizeChange={(contentWidth, contentHeight)=>{
     if(this.state.loading){
         this.setState({
             loading:false,
         });
     }
 }}

其实现原理是

1. 滑动时获取屏幕高度、FlatList已在竖轴滑动的数值，以及FlatList内容总高度，以此手动判断当前是否到达底部，到达后设置系统“loading”状态，发送载入请求
2. 当载入请求发送后，会从网络api获取新数据并添加到FlatList中，从而激活onContentSizeChange中定义的函数，将“loading”状态释放。

ps：本解决方案未考虑数据获取失败情况，有需求可自行在onScroll中添加setTimeout进行延迟释放“loading”状态。