flatlist

属性 添加头部组件 ListHeaderComponent 属性用来给FlatList添加头部组件 简单使用： //ES6之前写法 _header = function () { return ( <Text style={{fontWeight: 'bold', fontSize: 20}}>热门电影</Text> ); } <FlatList ListHeaderComponent={this._header}//header头部组件 /> 添加尾部组件 ListFooterComponent 属性为FlatList添加尾部组件，接收的参数跟 ListHeaderComponent 相同。 //ES6的写法 _footer = () => ( <Text style={{fontSize: 14, alignSelf: 'center'}}>到底啦，没有啦！</Text> ) <FlatList ListFooterComponent={this._footer} //添加尾部组件 /> 添加头部和尾部组件比较简单，需要注意的就是上边两者ES5和6写法的区别！ 添加分割线 ItemSeparatorComponent 属性可以为FlatList列表之间添加分割线。 举个例子: class ItemDivideComponent extends Component {

react-native 的 一个滑动容器的组件，不用像FlatList那样的固定形式的循环添加， 而是非常任性的添加模块，可以自己想加成什么样子就加成什么样子的一个原生 组件，非常好用，不亚于FlatList，里面有许多的属性来设置该组件的样式，当然 里面也是可以添加一个FlatList组件，所以要注意的有： 不要给 ScrollView 中不要加 [flex:1] 直接给该 ScrollView 设置高度（不建议），因为它会根据内部组件自动延伸自己的尺寸到合适的大小 keyboardDismissMode：用户拖拽滚动视图的时候，是否要隐藏软键盘 { none（默认值），拖拽时不隐藏软键盘 on-drag 当拖拽开始的时候隐藏软键盘 interactive 软键盘伴随拖拽操作同步地消失，并且如果往上滑动会恢复键盘。安卓设备上不支持这个选项，会表现的和none一样。 } refreshControl：指定RefreshControl组件，用于为ScrollView提供下拉刷新功能 showsHorizontalScrollIndicator：当此属性为true的时候，显示一个水平方向的滚动条 removeClippedSubviews：（实验特性）当此属性为true时，屏幕之外的子视图（子视图的overflow样式需要设为hidden）会被移除。这个可以提升大列表的滚动性能

本文基于React Native 0.52 Demo上传到Git了，有需要可以看看，写了新内容会上传的。Git地址 https://github.com/gingerJY/React-Native-Demo 一、总览 　　 这个效果也是APP里很常见的，之前把这个想的太复杂了，后来才知道原来用FlatList就可以轻松实现，效果图如下（专题精选）： 二、代码实现 　　1、加几条数据 topic: [ { title: '岁末清扫有它们，体验大不同', describe: '更轻松、更美好的大扫除攻略', price: '9.9元起', }, { title: '新年一点红，幸运一整年', describe: '那些让你“红”运当头的好物', price: '9.9元起', }, ] 　　2、写列表的一个item renderTopicItem = ({ item }) => { return ( <TouchableOpacity style={styles.topicItem}> <Image source={require('../../img/topic.jpg')} style={styles.topicImg} /> <View style={styles.topicContainer}> <View style={styles.topicText}> <Text

概述 在过去的一年中React Native经历了从v0.40到v0.52的十几次的版本迭代，我们看到在这十几次的版本迭代中React Native的组件库在不断地壮大，在新引进的组件中既有FlatList、SectionList等具有更高性能的列表组件，也有与时俱进的用于适配全屏幕的SafeAreaView组件，同时呢，一些性能较差、无法适应React Native未来发展的一些老的组件，如：ListView、Navigator等组件也逐渐退出了沙场。 本文将向大家总结React Native在过去的一年中的重要变更，以及新组件，新API的适配建议。通过本文希望能帮助你快速的了解React Native在过去一年中的重要更新，如何让你的APP去更快的应用React Native新的特性，让React Native新的组件及特性来提高你应用的性能与体验。 同时呢也为大家精心准备了 《React Native实战课程》 ，此课程会持续更新。 图解React Native年度报告 新增组件(8个) CheckBox ImageBackground VirtualizedList FlatList SwipeableFlatList SectionList MaskedViewIOS SafeAreaView 新增API(5个) AccessibilityInfo DeviceInfo

一、错误日志：Warning: Failed child context type: Invalid child context virtualizedCell.cellKey of type number supplied to CellRenderer, expected string. 这个错误是在使用 RN官网推出最新的列表组件 FlatList 是出现的红色警告，出现这个错误可以正常运行，就是每次调试时看到它总觉得怪怪的，所以就查资料处理了，下面给出解决方案： 解决示例代码片段： <FlatList style={myStyle.newsList} ref={(flatList)=>this._flatList = flatList} ItemSeparatorComponent={this._separator} renderItem={this._renderItem} keyExtractor={(item, index) => index.toString()} data={data}> </FlatList> 来源：博客园 作者： dtdxrk 链接：https://www.cnblogs.com/dtdxrk/p/11652975.html