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(类型为函数)：函数接收select和newProps两个属性。

  • 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(类型为函数)：函数接收select和newProps两个属性。

  • 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.rhkb.cn/news/90529.html

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

相关文章

导入示例工程出现error: failed to start ability. Error while Launching activity错误的解决办法

导入示例工程出现error: failed to start ability. Error while Launching activity错误的解决办法

导入华为健康生活应用&#xff08;ArkTS&#xff09;&#xff0c;使用DevEco Studio打开&#xff0c;运行报错&#xff1a; error: failed to start ability. Error while Launching activity解决办法&#xff1a;修改module.json5里面exported的值&#xff0c;由false改为tr…
阅读更多...
LVGL学习笔记 30 - List（列表）

LVGL学习笔记 30 - List（列表）

目录 1. 添加文本 2. 添加按钮 3. 事件 4. 修改样式 4.1 背景色 4.2 改变项的颜色 列表是一个垂直布局的矩形&#xff0c;可以向其中添加按钮和文本。 lv_obj_t* list1 lv_list_create(lv_scr_act());lv_obj_set_size(list1, 180, 220);lv_obj_center(list1); 部件包含&…
阅读更多...
07 - 深入浅出HashMap的设计与优化

07 - 深入浅出HashMap的设计与优化

在上一讲中提到过 Collection 接口&#xff0c;那么在 Java 容器类中&#xff0c;除了这个接口之外&#xff0c;还定义了一个很重要的 Map 接口&#xff0c;主要用来存储键值对数据。 HashMap 作为我们日常使用最频繁的容器之一&#xff0c;相信你一定不陌生了。今天我们就从 …
阅读更多...
做外贸发布产品的最简单的方式

做外贸发布产品的最简单的方式

最近和一个朋友聊天&#xff0c;说到他朋友在开某平台的网店&#xff0c;因为抄袭某家的好评而被投诉罚款&#xff0c;而被罚款的原因是这个朋友太懒了&#xff0c;在挑选了一家店铺的好评后&#xff0c;就直接照抄不误&#xff0c;而且全部的好评语都是抄自这同一家的&#xf…
阅读更多...
IOS开发-XCode14介绍与入门

IOS开发-XCode14介绍与入门

IOS开发-XCode14介绍与入门 1. XCODE14的小吐槽2. XCODE的功能bar一览3. XCODE项目配置一览4. XCODE更改DEBUG/RELEASE模式5. XCODE单元测试 1. XCODE14的小吐槽 iOS开发工具一直有个毛病&#xff0c;就是新版本的开发工具的总会有一些奇奇怪怪的bug。比如在我的Mac-Pro&#…
阅读更多...
小红书如何打造爆款引流吸粉？11个秘诀助你秒变达人！

小红书如何打造爆款引流吸粉？11个秘诀助你秒变达人！

在这个充满信息和内容的时代&#xff0c;小红书以其独特的社交平台特性和个性化内容吸引了众多用户。今天&#xff0c;我们就来揭秘小红书关注战略&#xff0c;了解如何在这个平台上打造独特的内容体验&#xff0c;与用户建立更亲近的连接。#小红书# 1、定位清晰&#xff0c;找…
阅读更多...
ChatGPT收录

ChatGPT收录

VSCode插件-ChatGPT 多磨助手 多磨助手 (domore.run) Steamship Steamship 免费合集 免费chatGPT - Ant Design Pro 免费AI聊天室 (xyys.one)
阅读更多...
职场中常用的项目管理软件盘点：了解这些选择

职场中常用的项目管理软件盘点：了解这些选择

随着工作的深入&#xff0c;就会发现管理类软件在职场中真的很重要&#xff0c;比如项目管理软件。一个好用的项目管理软件能够让工作达到事半功倍的效果&#xff0c;就比如Zoho Projects项目管理软件&#xff0c;它不仅可以将项目内容进行细化&#xff0c;还有更多有利于团队协…
阅读更多...
用 React+ts 实现无缝滚动的走马灯

用 React+ts 实现无缝滚动的走马灯

一、走马灯的作用 走马灯是一种常见的网页交互组件&#xff0c;可以展示多张图片或者内容&#xff0c;通过自动播放或者手动切换的方式&#xff0c;让用户能够方便地浏览多张图片或者内容。 本次实现的不是轮播图而是像传送带一样的无限滚动的形式。 二、需求梳理 走马灯可设…
阅读更多...
大数据：什么是数据分析及环境搭建

大数据：什么是数据分析及环境搭建

一、什么是数据分析 当今世界对信息技术的依赖程度在不断加深&#xff0c;每天都会有大量的数据产生&#xff0c;我们经常会感到数据越来越多&#xff0c;但是要从中发现有价值的信息却越来越难。这里所说的信息&#xff0c;可以理解为对数据集处理之后的结果&#xff0c;是从…
阅读更多...
基于 ObjectOutputStream 实现 对象与二进制数据 的序列化和反序列化

基于 ObjectOutputStream 实现 对象与二进制数据 的序列化和反序列化

目录 为什么要进行序列化呢&#xff1f; 如何实现 对象与二进制数据 的序列化和反序列化&#xff1f; 为什么要进行序列化呢&#xff1f; 主要是为了把一个对象&#xff08;结构化的数据&#xff09;转化成一个 字符串 / 字节数组&#xff0c;方便我们存储&#xff08;有时候需…
阅读更多...
软件测试工程师面试如何描述自动化测试是怎么实现的？

软件测试工程师面试如何描述自动化测试是怎么实现的？

软件测试工程师面试的时候&#xff0c;但凡简历中有透露一点点自己会自动化测试的技能点的描述&#xff0c;都会被面试官问&#xff0c;那你结合你的测试项目说说自动化测试是怎么实现的&#xff1f;一到这里&#xff0c;很多网友&#xff0c;包括我的学生&#xff0c;也都一脸…
阅读更多...
编写时源码优化插件试验品

编写时源码优化插件试验品

我又来倒垃圾啦 自己垃圾桶里的这个&#xff1a;egg language server on VSCode | Framist’s Little House 用蛋消灭魔鬼&#xff01;编写时源码优化插件 egg-language-server &#x1f9ea; in developing Source Code Optimization Tools at Writing-time 特性 demo | 点击跳…
阅读更多...
Springboot项目启动后按顺序加载自定义类 (demo)

Springboot项目启动后按顺序加载自定义类 (demo)

1. 实现ApplicationRunner接口, 重写run方法 import lombok.extern.slf4j.Slf4j; import org.springframework.boot.ApplicationArguments; import org.springframework.boot.ApplicationRunner; import org.springframework.core.annotation.Order; import org.springframewor…
阅读更多...
SQL 语句解析过程详解

SQL 语句解析过程详解

SQL 语句解析过程详解&#xff1a; 1&#xff0e;输入SQL语句 2&#xff0e;词法分析------flex 使用词法分析器&#xff08;由Flex生成&#xff09;将 SQL 语句分解为一个个单词&#xff0c;这些单词被称为“标记“。标记包括关键字、标识符、运算符、分隔符等。 2.1 flex 原…
阅读更多...
clion2020.3配置clang-format

clion2020.3配置clang-format

标题clion 启用clang-format 文件->设置->编辑器->代码样式. 为了保持原有代码风格不变&#xff0c;可以把原始的配置风格先导出&#xff0c;最好直接保存到自己的工程下&#xff0c;.clang-format是隐藏文件&#xff0c;需要用ctrlH才能看到 文件->设置->编辑…
阅读更多...
用Node.js吭哧吭哧撸一个运动主页

用Node.js吭哧吭哧撸一个运动主页

简单唠唠 某乎问题&#xff1a;人这一生&#xff0c;应该养成哪些好习惯&#xff1f; 问题链接&#xff1a;https://www.zhihu.com/question/460674063 如果我来回答肯定会有定期运动的字眼。 平日里也有煅练的习惯&#xff0c;时间久了后一直想把运动数据公开&#xff0c;…
阅读更多...
SpringBoot基于Zookeeper实现分布式锁

SpringBoot基于Zookeeper实现分布式锁

文章目录 问题背景前言实现搭建Zookeeper容器引入依赖ZK客户端的配置类ZK客户端的工厂类注入bean构建测试类 问题背景 研究分布式锁&#xff0c;基于ZK实现&#xff0c;需要整合到SpringBoot使用 前言 参考自SpringBoot集成Curator实现Zookeeper基本操作&#xff0c;Zookeeper入…
阅读更多...
地理数据的双重呈现：GIS与数据可视化

地理数据的双重呈现：GIS与数据可视化

前一篇文章带大家了解了GIS与三维GIS的关系&#xff0c;本文就GIS话题带大家一起探讨一下GIS和数据可视化之间的关系。 GIS&#xff08;地理信息系统&#xff09;和数据可视化在地理信息科学领域扮演着重要的角色&#xff0c;它们之间密切相关且相互增强。GIS是一种用于采集、…
阅读更多...
Scrum敏捷模型的三个角色！如何在线绘制Scrum敏捷模型图？

Scrum敏捷模型的三个角色！如何在线绘制Scrum敏捷模型图？

1. 什么是Scrum敏捷模型&#xff1f; Scrum是一种敏捷开发方法&#xff0c;用于管理和组织软件开发项目。它强调团队的自组织和迭代式开发&#xff0c;通过不断的反馈和调整来快速交付高质量的软件产品。 Scrum敏捷模型将项目分解为一系列短期的迭代周期&#xff0c;每一个…
阅读更多...
最新文章
推荐文章

Copyright @ 2022~2023