React Native 列表组件基础知识

ScrollView 组件

ScrollView组件是一个容器滚动组件,当容器超出指定宽高时就可以进行滚动交互。

ScrollView组件是一次性渲染所有的 React 子组件,这在性能上是比较差的,所以不建议当列表特别长的时候使用此组件。

接下来列举几个常用的一些属性:

  • contentContainerStyle 属性

    相当于为ScrollView组件设置样式,具体的实例如下:

    <ScrollView contentContainerStyle={styles.container}></ScrollView>;const styles = StyleSheet.create({container: {padding: 8,},
    });
    
  • refreshControl 属性

    结合 RefreshControl 组件一起使用,用于为 ScrollView 提供下拉刷新功能。仅适用于垂直 ScrollViews(horizontalprop 必须是 false)。

    具体实例如下:

    const App: React.FC = () => {const [refreshing, setRefreshing] = React.useState(false);const onRefresh = React.useCallback(() => {setRefreshing(true);setTimeout(() => {setRefreshing(false);}, 2000);}, []);return (<SafeAreaView style={styles.container}><ScrollViewcontentContainerStyle={styles.scrollView}refreshControl={<RefreshControl refreshing={refreshing} onRefresh={onRefresh} />}><Text>下拉刷新</Text></ScrollView></SafeAreaView>);
    };
    
  • scrollEnabled 属性

    当为 false 时,视图无法通过触摸交互滚动。请注意,视图始终可以通过调用来滚动 scrollTo。

    export default function ScrollCards() {return (<View><Text style={BaseStyle.headingText}>Scroll Cards</Text><ScrollView contentContainerStyle={styles.container}>{/* 第一组关闭滑动 */}<Text style={BaseStyle.headingText}>第一组</Text><ScrollView horizontal={true} scrollEnabled={false}><View style={styles.card}><Text>Click</Text></View><View style={styles.card}><Text>To</Text></View><View style={styles.card}><Text>Me</Text></View><View style={styles.card}><Text>Run</Text></View><View style={styles.card}><Text>Demo</Text></View></ScrollView>{/* 第二组开启滑动 */}<Text style={BaseStyle.headingText}>第二组</Text><ScrollView horizontal={true}><View style={styles.card}><Text>Click</Text></View><View style={styles.card}><Text>To</Text></View><View style={styles.card}><Text>Me</Text></View><View style={styles.card}><Text>Run</Text></View><View style={styles.card}><Text>Demo</Text></View></ScrollView></ScrollView></View>);
    }
    
  • horizontal 属性

    当 true 时,滚动视图的子级水平排列在行中,而不是垂直排列在列中。例子如上。运行效果如下图:
    在这里插入图片描述

SectionList 组件

此组件主要是用于分段列表展示,并且在性能上要比ScrollView组件更好。

此组件主要有如下:

  • 可配置的可见度回调
  • 列表标题支持
  • 列表页脚支持
  • 项目分隔符支持
  • 节标题支持
  • 节分隔符支持
  • 异构数据和项目渲染支持
  • 拉动刷新
  • 滚动加载

简单实例如下:

export default function SectionListCards() {const DATA = [{title: "Main dishes",data: ["Pizza", "Burger", "Risotto"],},{title: "Sides",data: ["French Fries", "Onion Rings", "Fried Shrimps"],},{title: "Drinks",data: ["Water", "Coke", "Beer"],},{title: "Desserts",data: ["Cheese Cake", "Ice Cream"],},];return (<View><Text style={BaseStyle.headingText}>SectionList 组件实例</Text><SectionListstyle={styles.container}sections={DATA}keyExtractor={(item, index) => item + index}renderItem={({ item }) => (<View style={styles.item}><Text style={styles.title}>{item}</Text></View>)}renderSectionHeader={({ section: { title } }) => (<Text style={styles.header}>{title}</Text>)}/></View>);
}

运行后效果如下图:
在这里插入图片描述

使用此组件需要注意以下几点:

  • 当内容滚动出渲染窗口时,超出窗口的数据不会自动保存的系统变量中。所以需要我们使用 Flux、Redux 或者 Relay 来存储是有需要展示的数据。

  • SectionList组件是 PureComponent 类型组件,这意味着如果 props 保持浅层拷贝的话,它将不会重新渲染。确保您的 renderItem 函数所依赖的所有内容都作为 prop(例如 extraData)传递,并且在更新后不是 === ,否则您的 UI 可能不会因更改而更新。

  • SectionList组件为了节省内存和实现平滑的滚动,页面的内容展示是异步实现的,这就意味着当滑动速度快于页面内容渲染速度的话,页面会出现空白内容。

  • 默认情况下,列表会在每个项目上查找 key 属性,并将其用作 React key。或者,您可以提供自定义 keyExtractor 属性。

组件必须的参数说明

  • renderItem

    每个部分中每个项目的默认渲染器。可以在每个部分的基础上覆盖。应该返回一个 React 元素。具体代码实例:

    renderItem={({ item, index, section, separators }) => ( )}
    
    • item(类型为对象): 需要渲染的内容数据
    • index(类型为数字):渲染内容的项目下标
    • section(类型为对象):SectionList当前渲染节点的完整对象
    • separators(类型为对象):具体有如下属性:
      • highlight(类型为函数):监听元素变为高亮后可以触发的事件
      • unhighlight(类型为函数):监听元素取消高亮后可以触发的事件
      • updateProps(类型为函数):函数接收selectnewProps两个属性。
  • sections

    需要渲染的数据

FlatList 组件

FlatList组件租用是用于展示基本、平面列表的高性能界面,具有如下功能:

  • 可选水平模式
  • 可配置的可见度回调
  • 标头支持
  • 页脚支持
  • 分隔符支持
  • 拉动刷新
  • 滚动加载
  • 滚动到索引支持
  • 多列支持

具体的实例如下:

const DATA = [{id: "bd7acbea-c1b1-46c2-aed5-3ad53abb28ba",title: "First Item",},{id: "3ac68afc-c605-48d3-a4f8-fbd91aa97f63",title: "Second Item",},{id: "58694a0f-3da1-471f-bd96-145571e29d72",title: "Third Item",},
];type ItemProps = { title: string };const Item = ({ title }: ItemProps) => (<View style={styles.item}><Text style={styles.title}>{title}</Text></View>
);export default function FlatListCards() {return (<View><Text style={BaseStyle.headingText}>FlatListCards</Text><FlatListdata={DATA}renderItem={({ item }) => <Item title={item.title} />}keyExtractor={(item) => item.id}/></View>);
}const styles = StyleSheet.create({container: {flex: 1,},item: {backgroundColor: "#f9c2ff",padding: 20,marginVertical: 8,marginHorizontal: 16,},title: {fontSize: 24,},
});

运行效果如下:
在这里插入图片描述
要渲染多列,请使用numColumns。 使用此方法而不是 flexWrap 布局可以防止与项目高度逻辑发生冲突。在上述的例子中,我们添加numColumns属性就可以,关键代码如下:

<FlatListnumColumns={2}data={DATA}renderItem={({ item }) => <Item title={item.title} />}keyExtractor={(item) => item.id}
/>

运行效果如下:
在这里插入图片描述
实现更加复杂、可选的实例:

type ItemData = {id: string;title: string;
};const DATA: ItemData[] = [{id: "bd7acbea-c1b1-46c2-aed5-3ad53abb28ba",title: "First Item",},{id: "3ac68afc-c605-48d3-a4f8-fbd91aa97f63",title: "Second Item",},{id: "58694a0f-3da1-471f-bd96-145571e29d72",title: "Third Item",},
];type ItemProps = {item: ItemData;onPress: () => void;backgroundColor: string;textColor: string;
};const Item = ({ item, onPress, backgroundColor, textColor }: ItemProps) => (<TouchableOpacityonPress={onPress}style={[styles.item, { backgroundColor }]}><Text style={[styles.title, { color: textColor }]}>{item.title}</Text></TouchableOpacity>
);export default function FlarCardsClick() {const [selectedId, setSelectedId] = useState<string>();const renderItem = ({ item }: { item: ItemData }) => {const backgroundColor = item.id === selectedId ? "#6e3b6e" : "#f9c2ff";const color = item.id === selectedId ? "white" : "black";return (<Itemitem={item}onPress={() => setSelectedId(item.id)}backgroundColor={backgroundColor}textColor={color}/>);};return (<View><Text style={BaseStyle.headingText}>FlarCardsClick</Text><FlatListdata={DATA}renderItem={renderItem}keyExtractor={(item) => item.id}extraData={selectedId}/></View>);
}const styles = StyleSheet.create({item: {padding: 20,marginVertical: 8,marginHorizontal: 16,},title: {fontSize: 24,},
});

运行效果如下:
在这里插入图片描述

使用此组件需要注意以下几点:

  • 当内容滚动出渲染窗口时,超出窗口的数据不会自动保存的系统变量中。所以需要我们使用 Flux、Redux 或者 Relay 来存储是有需要展示的数据。

  • flatList组件是 PureComponent 类型组件,这意味着如果 props 保持浅层拷贝的话,它将不会重新渲染。确保您的 renderItem 函数所依赖的所有内容都作为 prop(例如 extraData)传递,并且在更新后不是 === ,否则您的 UI 可能不会因更改而更新。

  • flatList组件为了节省内存和实现平滑的滚动,页面的内容展示是异步实现的,这就意味着当滑动速度快于页面内容渲染速度的话,页面会出现空白内容。

  • 默认情况下,列表会在每个项目上查找 key 属性,并将其用作 React key。或者,您可以提供自定义 keyExtractor 属性。

组件必须的参数说明

  • renderItem

    每个部分中每个项目的默认渲染器。可以在每个部分的基础上覆盖。应该返回一个 React 元素。具体代码实例:

    renderItem={({ item, index, section, separators }) => ( )}
    
    • item(类型为对象): 需要渲染的内容数据
    • index(类型为数字):渲染内容的项目下标
    • separators(类型为对象):具体有如下属性:
      • highlight(类型为函数):监听元素变为高亮后可以触发的事件
      • unhighlight(类型为函数):监听元素取消高亮后可以触发的事件
      • updateProps(类型为函数):函数接收selectnewProps两个属性。
  • data

    需要渲染的数据

VirtualizedList 组件

一般来说,只有当您需要比 FlatList 提供的更多灵活性时才应该真正使用VirtualizedList。可以通过对应的属性来对需要渲染的数据进行操作后再渲染,比之前的列表组件更加灵活一些。

VirtualizedList 组件通过对应的属性来维护需要渲染的页面元素,并且用适当的空白区域来替换窗口之外的所有项目,从而极大地提高了大型列表的内存消耗和性能。

具体实例如下:

type ItemData = {id: string;title: string;
};// 获取数据,这里是直接就返回处理后的数据
const getItem = (_data: unknown, index: number): ItemData => ({id: Math.random().toString(12).substring(0),title: `Item ${index + 1}`,
});// 列表的总数
const getItemCount = (_data: unknown) => 50;type ItemProps = {title: string;
};// 渲染的组件
const Item = ({ title }: ItemProps) => (<View style={styles.item}><Text style={styles.title}>{title}</Text></View>
);export default function VirtualizedListCaards() {return (<View><Text style={BaseStyle.headingText}>VirtualizedListCards</Text><VirtualizedListinitialNumToRender={10}renderItem={({ item }) => <Item title={item.title} />}keyExtractor={(item) => item.id}getItemCount={getItemCount}getItem={getItem}/></View>);
}const styles = StyleSheet.create({item: {backgroundColor: "#f9c2ff",height: 150,justifyContent: "center",marginVertical: 8,marginHorizontal: 16,padding: 20,},title: {fontSize: 32,},
});

使用此组件需要注意以下几点:

  • 当内容滚动出渲染窗口时,超出窗口的数据不会自动保存的系统变量中。所以需要我们使用 Flux、Redux 或者 Relay 来存储是有需要展示的数据。

  • flatList组件是 PureComponent 类型组件,这意味着如果 props 保持浅层拷贝的话,它将不会重新渲染。确保您的 renderItem 函数所依赖的所有内容都作为 prop(例如 extraData)传递,并且在更新后不是 === ,否则您的 UI 可能不会因更改而更新。

  • flatList组件为了节省内存和实现平滑的滚动,页面的内容展示是异步实现的,这就意味着当滑动速度快于页面内容渲染速度的话,页面会出现空白内容。

  • 默认情况下,列表会在每个项目上查找 key 属性,并将其用作 React key。或者,您可以提供自定义 keyExtractor 属性。

组件必备的参数说明

  • getItem

    从数据中提取需要渲染的数据

  • getItemCount

    确认需要渲染的组件有多少

  • renderItem

    从 data 数据中获取一个数据并进行渲染

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/34822.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

HTML(JavaEE初级系列12)

目录 前言&#xff1a; 1.HTML结构 1.1认识HTML标签 1.2HTML文件基本结构 1.3标签层次结构 1.4快速生成代码框架 2.HTML常见标签 2.1注释标签 2.2标题标签&#xff1a;h1-h6 2.3段落标签&#xff1a;p 2.4换行标签&#xff1a; br 2.5格式化标签 2.6图片标签&#…

【数据结构•堆】经典问题:k路归并

题目描述 k路归并问题&#xff1a;   把k个有序表合并成一个有序表。&#xff08; k < 10^4 &#xff09; 输入输出格式 输入格式&#xff1a; 输入数据共有 2*k1 行。   第一行&#xff0c;一个整数k&#xff08; k < 10^4 &#xff09;&#xff0c;表示有k个有序…

【详细教程】学会使用Python隧道代理

作为一名专业爬虫程序猿&#xff0c;我深知在进行网络数据采集时&#xff0c;可能会面临网络封锁、隐私泄露等问题。今天&#xff0c;我将与大家分享如何学会使用Python隧道代理&#xff0c;帮助我们自由访问受限网站&#xff0c;同时保护了解探索Python隧道代理&#xff01; …

3.1 Spring MVC概述

1. MVC概念 MVC是一种编程思想&#xff0c;它将应用分为模型&#xff08;Model&#xff09;、视图&#xff08;View&#xff09;、控制器&#xff08;Controller&#xff09;三个层次&#xff0c;这三部分以最低的耦合进行协同工作&#xff0c;从而提高应用的可扩展性及可维护…

C++ opencv:视频读取、变换颜色风格、保存

1. 相关知识点 VideoCapture&#xff1b; applyColorMap&#xff1b; VideoWriter&#xff1b; 2. 代码 编写代码main.cpp: #include<iostream> #include "opencv2/opencv.hpp" #include "opencv2/imgproc.hpp" #include "opencv2/highgu…

解开谜团:为什么红黑树胜过AVL树?

为什么红黑树胜过AVL树 博主简介一、引言1.1、红黑树和AVL树简介1.2、红黑树在某些方面优于AVL树 二、红黑树和AVL树的基本原理2.1、红黑树的定义和性质2.2、AVL树的定义和性质2.3、对比两种树结构的特点 三、插入和删除操作的复杂性比较3.1、红黑树的插入操作和平衡性维护3.2、…

幂次方(c++题解)

题目描述 任何一个正整数都可以用 22 的幂次方表示。例如 1372^72^32^0。 同时约定方次用括号来表示&#xff0c;即 a^b 可表示为 a(b)。 由此可知&#xff0c;137137 可表示为 2(7)2(3)2(0) 进一步&#xff1a; 7 2^222^0 ( 2^121 用 2 表示)&#xff0c;并且 322^0。 所…

Spring Boot 重启命令

Spring Boot 重启命令 本文描述了一个重启Spring Boot命令执行过程和示例 本文利用kill -9 关闭进程&#xff0c;不优雅&#xff0c;会突然中断程序&#xff0c;可能导致数据和逻辑异常 搜索微信小程序【亚特技术】在资源中搜索【优雅】可得到Spring Boot如何优化重启 1. 过…

【Bert101】变压器模型背后的复杂数学【02/4】

一、说明 众所周知&#xff0c;变压器架构是自然语言处理&#xff08;NLP&#xff09;领域的突破。它克服了 seq-to-seq 模型&#xff08;如 RNN 等&#xff09;无法捕获文本中的长期依赖性的局限性。变压器架构被证明是革命性架构&#xff08;如 BERT、GPT 和 T5 及其变体&…

【阵列信号处理】空间匹配滤波器、锥形/非锥形最佳波束成形器、样本矩阵反演 (SMI) 研究(Matlab代码实现)

&#x1f4a5;&#x1f4a5;&#x1f49e;&#x1f49e;欢迎来到本博客❤️❤️&#x1f4a5;&#x1f4a5; &#x1f3c6;博主优势&#xff1a;&#x1f31e;&#x1f31e;&#x1f31e;博客内容尽量做到思维缜密&#xff0c;逻辑清晰&#xff0c;为了方便读者。 ⛳️座右铭&a…

九耶丨阁瑞钛伦特-产品经理面试题

在产品上线后&#xff0c;会着重观察6类指标&#xff1a; 1、活跃用户指标 衡量APP用户规模的指标&#xff0c;一个产品是否成功&#xff0c;如果只看一个指标&#xff0c;那么这个指标一定是活跃用户数。 日活(DAU)&#xff1a;一天内日均活跃设备数(去重&#xff0c;每个公…

关于使用pycharm遇到只能使用unittest方式运行,无法直接选择Run

相信大家可能都遇到过这个问题&#xff0c;使用pycharm直接运行脚本的时候&#xff0c;只能选择unittest的方式&#xff0c;能愁死个人 经过几次各种尝试无果之后&#xff0c;博主就放弃死磕了&#xff0c;原谅博主是个菜鸟 后来遇到这样的问题&#xff0c;往往也就直接使用cm…

Python爬虫-抓取的目标数据为#x开头,怎么解决?

前言 本文是该专栏的第4篇,后面会持续分享python爬虫案例干货,记得关注。 在做爬虫项目的时候,有时候抓取的平台目标数据为&#x开头,如下图所示: 浏览器显示的正常数据,但通过爬虫协议获取到的网页源码数据却是以&#x开头的隐藏数据,遇到这种情况,爬虫需要怎么处…

【Linux从入门到精通】文件I/O操作(C语言vs系统调用)

文章目录 一、C语言的文件IO相关函数操作 1、1 fopen与fclose 1、2 fwrite 1、3 fprintf与fscanf 1、4 fgets与fputs 二、系统调用相关接口 2、1 open与close 2、2 write和read 三、简易模拟实现cat指令 四、总结 &#x1f64b;‍♂️ 作者&#xff1a;Ggggggtm &#x1f64b;‍…

Golang bitset 基本使用

安装&#xff1a; go get github.com/bits-and-blooms/bitset下面代码把fmtx换成fmt就行 //------------基本操作------------//构建一个64bit长度的bitsetb : bitset.New(64)//放入一个数b.Set(10)fmtx.Println("add-10&#xff1a;", b.DumpAsBits()) // 0000000…

针对英特尔酷睿 CPU 优化,Canonical 发布 Ubuntu 实时内核

导读Canonical 今天宣布针对支持时序协调运算&#xff08;TCC&#xff09;和时间敏感网络&#xff08;IEEE TSN&#xff09;的英特尔酷睿处理器&#xff0c;推出优化版实时 Ubuntu 内核。 Canonical 于今年 2 月宣布&#xff0c;为购买 Ubuntu Pro 订阅&#xff0c;使用代号为 …

OPENCV C++(七)霍夫线检测+找出轮廓和外接矩形+改进旋转

霍夫线检测 vector<Vec2f> lines1;HoughLines(canny_mat, lines1, 1, CV_PI / 180.0,90 );//45可以检测里面两条线 80检测出外边两条线 定义存放输出线的向量 此向量输出有<距离&#xff0c;角度> 因为检测的原理就是在变换霍夫空间里面去检测的&#xff0c;这里可…

ESP8266(RTOS SDK)内嵌网页以实现WEB配网以及数据交互

【本文发布于https://blog.csdn.net/Stack_/article/details/131997098&#xff0c;未经允许不得转载&#xff0c;转载须注明出处】 1、执行make menuconfig&#xff0c;将http头由512改为更大的值&#xff0c;否则用电脑浏览器访问正常&#xff0c;但用手机浏览器访问会因为ht…

基于weka手工实现K-means

一、K-means聚类算法 K均值聚类&#xff08;K-means clustering&#xff09;是一种常见的无监督学习算法&#xff0c;用于将数据集中的样本划分为K个不同的类别或簇。它通过最小化样本点与所属簇中心点之间的距离来确定最佳的簇划分。 K均值聚类的基本思想如下&#xff1a; …

【快应用】list组件如何区分滑动的方向?

【关键词】 list组件、滑动方向、scroll 【问题背景】 有cp反馈list这个组件在使用的时候&#xff0c;不知道如何区分它是上滑还是下滑。 【问题分析】 list组件除了通用事件之外&#xff0c;还提供了scroll、scrollbottom、scrolltop、scrollend、scrolltouchup事件&#x…