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了,这里介绍下具体的使用方法:
先看下图吧
![](http://upload-images.jianshu.io/upload_images/3463020-899fbd09f50e601f.jpeg?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
![](http://upload-images.jianshu.io/upload_images/3463020-b75aefb4d6b40af5.jpeg?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
上面的内容是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具体的代码
![](http://upload-images.jianshu.io/upload_images/3463020-ba8d91303adc799c.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
其他的代码略过了,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下面的源码吧
相关文章
- webpack+react+es6开发模式
- React Native之ListView实现九宫格效果
- [React Native]高度自增长的TextInput组件
- react + Ant Design + 支持 markdown 的 blog-react 项目的文档说明
- react-native如何让两个滚动窗口同时滚动
- React Native目录结构
- react.js基本操练
- React Hooks 避免的错误
- React组件设计实践总结01 - 类型检查
- 为什么你应该放弃React老的Context API用新的Context API
- React Native之阴影效果
- 将 React Native 项目运行在 Web 浏览器上面
- React-Native ListView拖拽交换Item
- React-Native中ListView 多选,单选
- redux在react-native上使用(五)--redux-actions使用
- React Native-随笔分类
- React Native学习ListView(三):吸顶效果
- React Native下拉刷新组件 ios 平台 支持ScrollView,ListView
- 《React-Native系列》19、 ListView组件之上拉刷新(iOS和Android通用)
- window环境下搭建react native及相关插件
- 20行代码实现redux,50行代码实现react-redux
- React-router路由基本原理
- awesome-react-native