ReactNative之FlatList使用及踩坑封装总结-创新互联
在RN中FlatList是一个高性能的列表组件,它是ListView组件的升级版,性能方面有了很大的提升,当然也就建议大家在实现列表功能时使用FlatList,尽量不要使用ListView,更不要使用ScrollView。既然说到FlatList,那就先温习一下它支持的功能。
创新互联主营友谊网站建设的网络公司,主营网站建设方案,App定制开发,友谊h5小程序设计搭建,友谊网站营销推广欢迎友谊等地区企业咨询- 完全跨平台。
- 支持水平布局模式。
- 行组件显示或隐藏时可配置回调事件。
- 支持单独的头部组件。
- 支持单独的尾部组件。
- 支持自定义行间分隔线。
- 支持下拉刷新。
- 支持上拉加载。
- 支持跳转到指定行(ScrollToIndex)。
今天的这篇文章不具体介绍如何使用,如果想看如何使用,可以参考我GitHub https://github.com/xiehui999/helloReactNative的一些示例。今天的这篇文章主要介绍我使用过程中感觉比较大的坑,并对FlatList进行的二次封装。
接下来,我们先来一个简单的例子。我们文章也有这个例子开始探讨。
this._onRefresh()} keyExtractor={(item, index) => item.id} ItemSeparatorComponent={() => } renderItem={this._renderItem} ListEmptyComponent={this.emptyComponent}/> //定义空布局 emptyComponent = () => { return } 暂无数据下拉刷新
另外有需要云服务器可以了解下创新互联scvps.cn,海内外云服务器15元起步,三天无理由+7*72小时售后在线,公司持有idc许可证,提供“云服务器、裸金属服务器、高防服务器、香港服务器、美国服务器、虚拟主机、免备案服务器”等云主机租用服务以及企业上云的综合解决方案,具有“安全稳定、简单易用、服务可用性高、性价比高”等特点与优势,专为企业上云打造定制,能够满足用户丰富、多元化的应用场景需求。
新闻名称:ReactNative之FlatList使用及踩坑封装总结-创新互联
URL分享:http://azwzsj.com/article/cdoipe.html