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>

上面是代码的官方截图

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

原文地址:https://www.cnblogs.com/lxdlovelxj/p/10114072.html

时间: 2024-08-30 15:43:41

FlatList 核心运用的相关文章

RN FlatList使用详解及源码解析

FlatList使用详解及源码解析 前言 长列表或者无限下拉列表是最常见的应用场景之一.RN 提供的 ListView 组件,在长列表这种数据量大的场景下,性能堪忧.而在最新的 0.43 版本中,提供了 FlatList 组件,或许就是你需要的高性能长列表解决方案.它足以应对大多数的长列表场景. 一.功能简介 FlatList高性能的简单列表组件,支持下面这些常用的功能: 完全跨平台. 支持水平布局模式. 行组件显示或隐藏时可配置回调事件. 支持单独的头部组件. 支持单独的尾部组件. 支持自定义

[RN] React Native FlatList跳转到顶部/底部

React Native FlatList跳转到顶部/底部 核心代码如下: <ScrollView showsVerticalScrollIndicator={false} contentContainerStyle={styles.container} //下拉刷新 ,有 ScrollView 需要加载ScrollView,无则加到 FlatList refreshControl={ <RefreshControl refreshing={this.state.isRefreshing} o

Java核心编程快速学习

Java核心编程部分的基础学习内容就不一一介绍了,本文的重点是JAVA中相对复杂的一些概念,主体内容如下图所示. 反射reflect是理解Java语言工作原理的基础,Java编译器首先需要将我们编写的.java源文件编译为.class字节码,然后再JVM虚拟机上运行,接下来通过一个表格,来了解反射的基本操作. 功能 示例 泛化的Class引用 Class<?> intClass = int.class Class<? extends Number> bounded = int.cl

蓝牙核心规格

两种最常见的核心规格实施为蓝牙基本速率/增强数据率(BR/EDR)(已采纳为2.0/2.1版)和低功耗蓝牙(Bluetooth Low Energy)(已采纳为4.0/4.1/4.2版).每种实施都有不同的用例,且使用不同的芯片,以满足基本的硬件要求.双模式芯片皆可适用于此两种用例的应用. 区别: 蓝牙BR/EDR技术--建立相对短程.持续的无线连接,为播放音频流等用例的理想之选 低功耗蓝牙技术--允许快速进行相对远程的无线连接,为不需持续连接且所需电池寿命长的物联网(loT)应用的理想之选 双

python 核心编程(1)

下划线_在解释器中有特别的含义,表示最后一个表达式的值 Python的print语句,与字符串格式操作符%结合使用,可以实现字符串的替换功能 num=raw_input('NOW ENTER A NUMBER:')\ int(num) 核心笔记 在学习PYTHON的过程中,如果需要帮助就  help(raw_input) 数字int long bool float complex 字符串 Python支持使用成对的单引号或双引号,三引号(三个连续的单引号或者双引号)

30分钟掌握ES6核心内容

ECMAScript 6(以下简称ES6)是JavaScript语言的下一代标准.因为当前版本的ES6是在2015年发布的,所以又称ECMAScript 2015. 也就是说,ES6就是ES2015. 虽然目前并不是所有浏览器都能兼容ES6全部特性,但越来越多的程序员在实际项目当中已经开始使用ES6了.所以就算你现在不打算使用ES6,但为了看懂别人的你也该懂点ES6的语法了... 在我们正式讲解ES6语法之前,我们得先了解下Babel. Babel Babel是一个广泛使用的ES6转码器,可以将

arm方案商,三星解决方案S5P4418核心板

产品简介 G4418开发平台采用邮票孔的核心板+底板方式设计,核心板可扩展性强,多达 184 PIN 管脚,运行速度高达 1.4GHz.PCB 采用 8 层沉金工艺设计,具有最佳的电气特性和抗干扰特性,工作稳定可靠.核心板板载了 PMU,带库仑计的充电管理,可以广泛应用于 MID,POS,PDA,PND,智能家居,手机,车机,学习机,游戏机以及其他各种工控领域. S5P4418 采用 28nm 制作工艺,内置高性能 4 核 A9 ARM 架构,相比 Exynos4412, 在多媒体性能上,它几乎

物联网核心协议—消息推送技术演进

消息触达能力是物联网(internet ofthings, IOT)的重要支撑,而物联网很多技术都源于移动互联网.本文阐述移动互联网消息推送技术在物联网中的应用和演进. 一.物联网架构和关键技术 从开发的角度,无线接入是物联网设备端的核心技术,身份设备管理和消息推送技术是物联网云端的核心技术.而从场景体验的角度,除了前者,还要包括手机的前端开发技术. 在上一篇<一张图读懂基于微信硬件平台的物联网架构>博文中,笔者曾用一张大图详细描述了基于微信硬件平台的物联网架构的组成要素.关键场景.和通信协议

核心动画

在ViewController.m中. @interface ViewController ()@property(nonatomic, strong) UIView * MyView;@end @implementation ViewController - (void)viewDidLoad {    [super viewDidLoad];            self.MyView = [[UIView alloc] initWithFrame:CGRectMake(100, 100,