[React-Native]FlatList/SectionLi

2019-08-28  本文已影响0人  猎手Andy

这个问题相信不少人遇到过,于是乎google之,翻了很久才找到一个方法,就是设置固定高度。

在没有解决之前,onEndReached 是频繁调用,由于loadMoreData这个异步方法,还导致顺序错乱,关键还不会自己结束,直到加载完所有的Page,WTF。

原因就不说了,我不知道 :) 脑细胞牺牲太多了 不想研究了

解决方法:

// Container
onEndReached = async () => {
    if (this.dataInitialized) { // 首次加载过数据
      if (!this.isLoadingData) { // 防止快速多次调用
        this.isLoadingData = true;
        await this.loadMoreData();
        this.isLoadingData = false;
      }
    }
  }

// Component
// 重点是这里 style={{ height: getScreenContentHeight() }}
<SectionList
          style={{ height: getScreenContentHeight() }}
          renderItem={this.renderItem}
          renderSectionHeader={this.renderSectionHeader}
          onEndReached={this.props.onEndReached}
          onEndReachedThreshold={0.1}
          sections={sections}
          ItemSeparatorComponent={DefaultItemSeparator}
          keyExtractor={(item, index) => item + index}
          ListEmptyComponent={
            this.props.notification.isFetching === false
              ? (<EmptyListView />) : null
          }
        />

// Utility
export function getScreenContentHeight(tabBarHeight = 0) {
  const theHeight = height - getHeaderHeight() - tabBarHeight;
  return theHeight;
}

收工!

上一篇 下一篇

猜你喜欢

热点阅读