詳細講一下RN(React Native)中的列表組件FlatList和SessionList

1. FlatList 基礎使用

import React from 'react';
import { View, Text, FlatList, StyleSheet } from 'react-native';export const SimpleListDemo: React.FC = () => {// 1. 準備數據const data = [{ id: '1', title: '項目 1' },{ id: '2', title: '項目 2' },{ id: '3', title: '項目 3' },];// 2. 定義如何渲染每一項const renderItem = ({ item }) => (<View style={styles.item}><Text>{item.title}</Text></View>);// 3. 渲染 FlatListreturn (<FlatListdata={data}                    // 數據源renderItem={renderItem}        // 渲染項keyExtractor={item => item.id} // 指定 key/>);
};const styles = StyleSheet.create({item: {padding: 20,borderBottomWidth: 1,borderBottomColor: '#ccc',},
});

2. 添加頭部和底部

import React from 'react';
import { View, Text, FlatList, StyleSheet } from 'react-native';export const ListWithHeaderFooter: React.FC = () => {const data = [/* ... */];// 1. 定義頭部組件const ListHeader = () => (<View style={styles.header}><Text>這是列表頭部</Text></View>);// 2. 定義底部組件const ListFooter = () => (<View style={styles.footer}><Text>這是列表底部</Text></View>);return (<FlatListdata={data}renderItem={({ item }) => (<View style={styles.item}><Text>{item.title}</Text></View>)}ListHeaderComponent={ListHeader}   // 添加頭部ListFooterComponent={ListFooter}   // 添加底部keyExtractor={item => item.id}/>);
};const styles = StyleSheet.create({header: {padding: 15,backgroundColor: '#f0f0f0',},item: {padding: 20,borderBottomWidth: 1,borderBottomColor: '#ccc',},footer: {padding: 15,backgroundColor: '#f0f0f0',},
});

3. 下拉刷新和上拉加載

import React, { useState } from 'react';
import { View, Text, FlatList, RefreshControl, ActivityIndicator, StyleSheet 
} from 'react-native';export const RefreshLoadMoreList: React.FC = () => {const [refreshing, setRefreshing] = useState(false);const [loading, setLoading] = useState(false);const [data, setData] = useState([/* 初始數據 */]);// 1. 處理下拉刷新const onRefresh = async () => {setRefreshing(true);try {// 這裡請求新數據const newData = await fetchNewData();setData(newData);} finally {setRefreshing(false);}};// 2. 處理上拉加載更多const onLoadMore = async () => {if (loading) return;setLoading(true);try {// 這裡請求更多數據const moreData = await fetchMoreData();setData([...data, ...moreData]);} finally {setLoading(false);}};return (<FlatListdata={data}renderItem={({ item }) => (<View style={styles.item}><Text>{item.title}</Text></View>)}// 下拉刷新配置refreshControl={<RefreshControlrefreshing={refreshing}onRefresh={onRefresh}/>}// 上拉加載配置onEndReached={onLoadMore}onEndReachedThreshold={0.1}ListFooterComponent={loading ? <ActivityIndicator /> : null}/>);
};

4. 常用配置項說明

<FlatList// 基礎配置data={data}                          // 列表數據renderItem={renderItem}              // 渲染每一項的方法keyExtractor={item => item.id}       // 生成 key 的方法// 樣式相關contentContainerStyle={styles.list}  // 內容容器樣式style={styles.container}             // FlatList 本身樣式// 性能優化initialNumToRender={10}              // 首次渲染的項目數maxToRenderPerBatch={10}             // 每次渲染的最大數量windowSize={5}                       // 渲染窗口大小// 滾動相關showsVerticalScrollIndicator={false} // 是否顯示滾動條scrollEnabled={true}                 // 是否可以滾動
/>

5. 空列表處理

import React from 'react';
import { View, Text, FlatList, StyleSheet } from 'react-native';export const EmptyList: React.FC = () => {const data = [];  // 空數據const EmptyComponent = () => (<View style={styles.empty}><Text>暫無數據</Text></View>);return (<FlatListdata={data}renderItem={({ item }) => (/* ... */)}ListEmptyComponent={EmptyComponent}  // 當數據為空時顯示/>);
};const styles = StyleSheet.create({empty: {flex: 1,justifyContent: 'center',alignItems: 'center',padding: 20,},
});

2. SessionList基礎使用

import React from 'react';
import { View, Text, SectionList, StyleSheet } from 'react-native';export const SimpleSectionList: React.FC = () => {// 1. 準備分組數據const sections = [{title: '分組A',data: [{ id: '1', name: '項目A1' },{ id: '2', name: '項目A2' },]},{title: '分組B',data: [{ id: '3', name: '項目B1' },{ id: '4', name: '項目B2' },]}];// 2. 渲染每個項目const renderItem = ({ item }) => (<View style={styles.item}><Text>{item.name}</Text></View>);// 3. 渲染分組標題const renderSectionHeader = ({ section }) => (<View style={styles.header}><Text style={styles.headerText}>{section.title}</Text></View>);return (<SectionListsections={sections}                     // 分組數據renderItem={renderItem}                 // 渲染每個項目renderSectionHeader={renderSectionHeader} // 渲染分組標題keyExtractor={item => item.id}          // key提取器/>);
}const styles = StyleSheet.create({item: {padding: 15,backgroundColor: 'white',},header: {padding: 10,backgroundColor: '#f0f0f0',},headerText: {fontSize: 16,fontWeight: 'bold',},
});

2. 添加分組間距和分隔線

import React from 'react';
import { View, SectionList, StyleSheet } from 'react-native';export const SectionListWithSeparators: React.FC = () => {const sections = [/* ... */];// 1. 項目之間的分隔線const ItemSeparator = () => (<View style={styles.itemSeparator} />);// 2. 分組之間的間距const SectionSeparator = () => (<View style={styles.sectionSeparator} />);return (<SectionListsections={sections}renderItem={renderItem}renderSectionHeader={renderSectionHeader}ItemSeparatorComponent={ItemSeparator}     // 項目分隔線SectionSeparatorComponent={SectionSeparator} // 分組分隔線stickySectionHeadersEnabled={true}         // 分組標題固定/>);
};const styles = StyleSheet.create({itemSeparator: {height: 1,backgroundColor: '#eee',},sectionSeparator: {height: 10,backgroundColor: '#f5f5f5',},
});

3. 下拉刷新和加載更多

import React, { useState } from 'react';
import { SectionList, RefreshControl, ActivityIndicator 
} from 'react-native';export const RefreshableSectionList: React.FC = () => {const [refreshing, setRefreshing] = useState(false);const [loading, setLoading] = useState(false);const [sections, setSections] = useState([/* 初始數據 */]);// 1. 處理下拉刷新const onRefresh = async () => {setRefreshing(true);try {const newData = await fetchNewData();setSections(newData);} finally {setRefreshing(false);}};// 2. 處理加載更多const onLoadMore = async () => {if (loading) return;setLoading(true);try {const moreData = await fetchMoreData();setSections([...sections, ...moreData]);} finally {setLoading(false);}};return (<SectionListsections={sections}renderItem={renderItem}renderSectionHeader={renderSectionHeader}// 下拉刷新refreshControl={<RefreshControlrefreshing={refreshing}onRefresh={onRefresh}/>}// 加載更多onEndReached={onLoadMore}onEndReachedThreshold={0.2}ListFooterComponent={loading ? <ActivityIndicator /> : null}/>);
};

4.空列表和列表頭尾

import React from 'react';
import { View, Text, SectionList } from 'react-native';export const SectionListWithHeaderFooter: React.FC = () => {const sections = [/* ... */];// 1. 列表頭部const ListHeader = () => (<View style={styles.listHeader}><Text>列表頭部</Text></View>);// 2. 列表底部const ListFooter = () => (<View style={styles.listFooter}><Text>列表底部</Text></View>);// 3. 空列表顯示const ListEmpty = () => (<View style={styles.empty}><Text>暫無數據</Text></View>);return (<SectionListsections={sections}renderItem={renderItem}renderSectionHeader={renderSectionHeader}ListHeaderComponent={ListHeader}ListFooterComponent={ListFooter}ListEmptyComponent={ListEmpty}/>);
};

5. 常用配置項總結

<SectionList// 基礎配置sections={sections}                        // 分組數據renderItem={renderItem}                    // 渲染項目renderSectionHeader={renderSectionHeader}  // 渲染分組標題keyExtractor={(item) => item.id}          // key提取器// 分組相關stickySectionHeadersEnabled={true}        // 分組標題是否固定renderSectionFooter={renderSectionFooter}  // 渲染分組底部// 分隔線ItemSeparatorComponent={ItemSeparator}     // 項目分隔線SectionSeparatorComponent={SectionSeparator} // 分組分隔線// 性能優化initialNumToRender={10}                    // 初始渲染數量maxToRenderPerBatch={10}                   // 每批渲染數量windowSize={5}                             // 渲染窗口大小// 樣式相關contentContainerStyle={styles.container}   // 內容容器樣式style={styles.list}                        // 列表樣式
/>

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

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

相关文章

Redis（5，jedis和spring）

Redis（5，jedis和spring）

在前面的学习中&#xff0c;只是学习了各种redis的操作&#xff0c;都是在redis命令行客户端操作的&#xff0c;手动执行的&#xff0c;更多的时候就是使用redis的api&#xff08;&#xff09;&#xff0c;进一步操作redis程序。 在java中实现的redis客户端有很多&#xff0c;…
阅读更多...
AAAI2024论文解读|HGPROMPT Bridging Homogeneous and Heterogeneous Graphs

AAAI2024论文解读|HGPROMPT Bridging Homogeneous and Heterogeneous Graphs

论文标题 HGPROMPT: Bridging Homogeneous and Heterogeneous Graphs for Few-shot Prompt Learning 跨同构异构图的小样本提示学习 论文链接 HGPROMPT: Bridging Homogeneous and Heterogeneous Graphs for Few-shot Prompt Learning论文下载 论文作者 Xingtong Yu, Yuan…
阅读更多...
闲鱼自动抓取/筛选/发送系统

闲鱼自动抓取/筛选/发送系统

可监控闲鱼最新发布商品&#xff0c;发送钉钉 1&#xff0c;精准关键词匹配&#xff1a;输入核心关键词&#xff0c;精准定位与之高度契合的信息&#xff0c;确保搜索结果直击要点&#xff0c;满足您对特定内容的急切需求。 2&#xff0c;标题关键词智能筛选&#xff1a;不仅着…
阅读更多...
AI编程工具使用技巧：在Visual Studio Code中高效利用阿里云通义灵码

AI编程工具使用技巧：在Visual Studio Code中高效利用阿里云通义灵码

AI编程工具使用技巧&#xff1a;在Visual Studio Code中高效利用阿里云通义灵码 前言一、通义灵码介绍1.1 通义灵码简介1.2 主要功能1.3 版本选择1.4 支持环境 二、Visual Studio Code介绍1.1 VS Code简介1.2 主要特点 三、安装VsCode3.1下载VsCode3.2.安装VsCode3.3 打开VsCod…
阅读更多...
【Unity3D】Unity混淆工具Obfuscator使用

【Unity3D】Unity混淆工具Obfuscator使用

目录 一、导入工具 二、各种混淆形式介绍 2.1 程序集混淆 2.2 命名空间混淆 2.3 类混淆 2.4 函数混淆 2.5 参数混淆 2.6 字段混淆 2.7 属性混淆 2.8 事件混淆 三、安全混淆 四、兼容性处理 4.1 动画方法兼容 4.2 GUI方法兼容 4.3 协程方法兼容 五、选项 5.1 调…
阅读更多...
2024年终总结：技术成长与突破之路

2024年终总结：技术成长与突破之路

文章目录 前言一、技术成长&#xff1a;菜鸟成长之路1. 学习与实践的结合2. 技术分享与社区交流 二、生活与事业的平衡&#xff1a;技术之外的思考1. 时间管理与效率提升2. 技术对生活的积极影响 三、突破与展望&#xff1a;未来之路1. 技术领域的突破2. 未来规划与目标 四、结…
阅读更多...
计算机网络-运输层

计算机网络-运输层

重点内容&#xff1a; 运输层 是整个网络体系结构中的关键层次之一。一定要弄清以下一些重要概念&#xff1a; (1) 运输层为相互通信的应用进程提供逻辑通信。 (2) 端口和套接字的意义。 (3) 无连接的 UDP 的特点。 (4) 面向连接的 TCP 的特点。 (5) 在不可靠的网…
阅读更多...
【Elasticsearch】inference ingest pipeline

【Elasticsearch】inference ingest pipeline

Elasticsearch 的 Ingest Pipeline 功能允许你在数据索引之前对其进行预处理。通过使用 Ingest Pipeline&#xff0c;你可以执行各种数据转换和富化操作&#xff0c;包括使用机器学习模型进行推理&#xff08;inference&#xff09;。这在处理词嵌入、情感分析、图像识别等场景…
阅读更多...
使用 .NET Core 6.0 Web API 上传单个和多个文件

使用 .NET Core 6.0 Web API 上传单个和多个文件

示例代码&#xff1a; https://download.csdn.net/download/hefeng_aspnet/90138968 介绍 我们将在 IFormFile 接口和 .NET 提供的其他接口的帮助下&#xff0c;逐步讨论单个和多个文件上传。 .NET 提供了一个 IFormFile 接口&#xff0c;代表 HTTP 请求中传输的文件。 此外…
阅读更多...
Ceisum无人机巡检直播视频投射

Ceisum无人机巡检直播视频投射

接上次的视频投影&#xff0c;Leader告诉我这个视频投影要用在两个地方&#xff0c;一个是我原先写的轨迹回放那里&#xff0c;另一个在无人机起飞后的地图回显&#xff0c;要实时播放无人机拍摄的视频&#xff0c;还要能转镜头&#xff0c;让我把这个也接一下。 我的天&#x…
阅读更多...
Day21-【软考】短文，计算机网络开篇，OSI七层模型有哪些协议？

Day21-【软考】短文，计算机网络开篇，OSI七层模型有哪些协议？

文章目录 OSI七层模型有哪些&#xff1f;有哪些协议簇&#xff1f;TCP/IP协议簇中的TCP协议三次握手是怎样的&#xff1f;基于UDP的DHCP协议是什么情况&#xff1f;基于UDP的DNS协议是什么情况&#xff1f; OSI七层模型有哪些&#xff1f; 题目会考广播域 有哪些协议簇&#x…
阅读更多...
媒体新闻发稿要求有哪些？什么类型的稿件更好通过？

媒体新闻发稿要求有哪些？什么类型的稿件更好通过？

为了保证推送信息的内容质量&#xff0c;大型新闻媒体的审稿要求一向较为严格。尤其在商业推广的过程中&#xff0c;不少企业的宣传稿很难发布在这些大型新闻媒体平台上。 媒体新闻发稿要求有哪些&#xff1f;就让我们来了解下哪几类稿件更容易过审。 一、媒体新闻发稿要求有哪…
阅读更多...
Flutter_学习记录_导航和其他

Flutter_学习记录_导航和其他

Flutter 的导航页面跳转&#xff0c;是通过组件Navigator 和 组件MaterialPageRoute来实现的&#xff0c;Navigator提供了很多个方法&#xff0c;但是目前&#xff0c;我只记录我学习过程中接触到的方法&#xff1a; Navigator.push(), 跳转下一个页面Navigator.pop(), 返回上一…
阅读更多...
mathematical-expression 实现 数学表达式解析 Java 篇（最新版本）

mathematical-expression 实现 数学表达式解析 Java 篇（最新版本）

mathematical-expression &#xff08;MAE&#xff09; 切换至 中文文档 Community QQ group 访问链接进行交流信息的获取&#xff1a;https://diskmirror.lingyuzhao.top/DiskMirrorBackEnd/FsCrud/downLoad/18/Binary?fileNameArticle/Image/-56202138/1734319937274.jpg…
阅读更多...
http的请求体各项解析

http的请求体各项解析

一、前言 做Java开发的人员都知道&#xff0c;其实我们很多时候不单单在写Java程序。做的各种各样的系统&#xff0c;不管是PC的 还是移动端的&#xff0c;还是为别的系统提供接口。其实都离不开http协议或者https 这些东西。Java作为编程语言&#xff0c;再做业务开发时&#…
阅读更多...
Java 大视界 -- Java 大数据中的自然语言生成技术与实践（63）

Java 大视界 -- Java 大数据中的自然语言生成技术与实践（63）

&#x1f496;亲爱的朋友们&#xff0c;热烈欢迎来到 青云交的博客&#xff01;能与诸位在此相逢&#xff0c;我倍感荣幸。在这飞速更迭的时代&#xff0c;我们都渴望一方心灵净土&#xff0c;而 我的博客 正是这样温暖的所在。这里为你呈上趣味与实用兼具的知识&#xff0c;也…
阅读更多...
计算机网络三张表（ARP表、MAC表、路由表）总结

计算机网络三张表（ARP表、MAC表、路由表）总结

参考&#xff1a; 网络三张表&#xff1a;ARP表, MAC表, 路由表&#xff0c;实现你的网络自由&#xff01;&#xff01;_mac表、arp表、路由表-CSDN博客 网络中的三张表&#xff1a;ARP表、MAC表、路由表 首先要明确一件事&#xff0c;如果一个主机要发送数据&#xff0c;那么必…
阅读更多...
Git Bash 配置 zsh

Git Bash 配置 zsh

博客食用更佳 博客链接 安装 zsh 安装 Zsh 安装 Oh-my-zsh github仓库 sh -c "$(curl -fsSL https://install.ohmyz.sh/)"让 zsh 成为 git bash 默认终端 vi ~/.bashrc写入&#xff1a; if [ -t 1 ]; thenexec zsh fisource ~/.bashrc再重启即可。 更换主题 …
阅读更多...
【问题】Chrome安装不受支持的扩展 解决方案

【问题】Chrome安装不受支持的扩展 解决方案

此扩展程序已停用&#xff0c;因为它已不再受支持 Chromium 建议您移除它。详细了解受支持的扩展程序 此扩展程序已停用&#xff0c;因为它已不再受支持 详情移除 解决 1. 解压扩展 2.打开manifest.json 3.修改版本 将 manifest_version 改为3及以上 {"manifest_ver…
阅读更多...
在 Windows 系统上，将 Ubuntu 从 C 盘 迁移到 D 盘

在 Windows 系统上，将 Ubuntu 从 C 盘 迁移到 D 盘

在 Windows 系统上&#xff0c;如果你使用的是 WSL&#xff08;Windows Subsystem for Linux&#xff09;并安装了 Ubuntu&#xff0c;你可以将 Ubuntu 从 C 盘 迁移到 D 盘。迁移过程涉及导出当前的 Ubuntu 发行版&#xff0c;然后将其导入到 D 盘的目标目录。以下是详细的步骤…
阅读更多...
最新文章
推荐文章

Copyright @ 2022~2023