FlatList 核心运用

Posted lxdlovelxj

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了FlatList 核心运用相关的知识,希望对你有一定的参考价值。

<FlatList
data={this.state.stuList}
renderItem={this._renderItem}
keyExtactor={this._keyExtractor}
ItemSeparatorComponent={this._separator}
/>
this.state={
stuList:[{},{},{}]
}
_renderItem=({item})=>{
return <View>..</View>
}
_keyExtractor=({item,index})=>{
return item.key.tostring();
}
_separator=>{
return <View style={{height:1,backgroundColor:‘#FFFFFF‘}}/>
}

 

运用上面的控件 就可以有下拉 和上滑 的效果 比如QQ里的刷新 和 网页里的加载  

data,是一个多个对象的数组,在状态里用[] 添加

renderItem 是呈现在界面的代码段  几个对象就会出现几次

keyExtator 是一个对item的转义字段

ItemSaparaComponent 是一个用来间隔 <View> 的<View>

 

技术分享图片

上面是代码的官方截图

下面是一个简单案例的效果图片

技术分享图片

 


















以上是关于FlatList 核心运用的主要内容,如果未能解决你的问题,请参考以下文章

React Native FlatList 原理解析与性能优化

vuex及其五大核心功能运用解析

技术交流 | 运用Ansible作为您的自动化核心

请问怎么学习Python?

十项核心记忆法则

ReactNative进阶(三十七):应用SectionList实现分组列表