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

news2025/1/27 12:33:21

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. 渲染 FlatList
  return (
    <FlatList
      data={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 (
    <FlatList
      data={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 (
    <FlatList
      data={data}
      renderItem={({ item }) => (
        <View style={styles.item}>
          <Text>{item.title}</Text>
        </View>
      )}
      // 下拉刷新配置
      refreshControl={
        <RefreshControl
          refreshing={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 (
    <FlatList
      data={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 (
    <SectionList
      sections={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 (
    <SectionList
      sections={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 (
    <SectionList
      sections={sections}
      renderItem={renderItem}
      renderSectionHeader={renderSectionHeader}
      // 下拉刷新
      refreshControl={
        <RefreshControl
          refreshing={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 (
    <SectionList
      sections={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.coloradmin.cn/o/2283357.html

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈，一经查实，立即删除！

相关文章

MFC程序设计（四）窗口创建机制

MFC程序设计（四）窗口创建机制

钩子函数 钩子属于win32技术&#xff0c;具有优先勾取消息的权利&#xff1a;当一个消息产生时&#xff0c;钩子勾取消息进行处理&#xff0c;然后消息才送回程序 接下来以一个勾取窗口创建消息的钩子为例进行讲解 钩子类型有键盘钩子&#xff0c;鼠标钩子&#xff0c;WH_CBT…
阅读更多...
【JavaEE进阶】Spring留言板实现

【JavaEE进阶】Spring留言板实现

目录 &#x1f38d;预期结果 &#x1f340;前端代码 &#x1f384;约定前后端交互接口 &#x1f6a9;需求分析 &#x1f6a9;接口定义 &#x1f333;实现服务器端代码 &#x1f6a9;lombok介绍 &#x1f6a9;代码实现 &#x1f334;运行测试 &#x1f384;前端代码实…
阅读更多...
Unity开发一个单人FPS游戏的教程总结

Unity开发一个单人FPS游戏的教程总结

这个系列的前几篇文章介绍了如何从头开始用Unity开发一个FPS游戏&#xff0c;感兴趣的朋友可以回顾一下。这个系列的文章如下&#xff1a; Unity开发一个FPS游戏_unity 模仿开发fps 游戏-CSDN博客 Unity开发一个FPS游戏之二_unity 模仿开发fps 游戏-CSDN博客 Unity开发一个F…
阅读更多...
论文速读|Is Cosine-Similarity of Embeddings Really About Similarity?WWW24

论文速读|Is Cosine-Similarity of Embeddings Really About Similarity?WWW24

论文地址&#xff1a; https://arxiv.org/abs/2403.05440 https://dl.acm.org/doi/abs/10.1145/3589335.3651526 bib引用&#xff1a; inproceedings{Steck_2024, series{WWW ’24},title{Is Cosine-Similarity of Embeddings Really About Similarity?},url{http://dx.doi.o…
阅读更多...
71.在 Vue 3 中使用 OpenLayers 实现按住 Shift 拖拽、旋转和缩放效果

71.在 Vue 3 中使用 OpenLayers 实现按住 Shift 拖拽、旋转和缩放效果

前言 在前端开发中&#xff0c;地图功能是一个常见的需求。OpenLayers 是一个强大的开源地图库&#xff0c;支持多种地图源和交互操作。本文将介绍如何在 Vue 3 中集成 OpenLayers&#xff0c;并实现按住 Shift 键拖拽、旋转和缩放地图的效果。 实现效果 按住 Shift 键&#…
阅读更多...
PyQt6医疗多模态大语言模型（MLLM）实用系统框架构建初探（上.文章部分）

PyQt6医疗多模态大语言模型（MLLM）实用系统框架构建初探（上.文章部分）

一、引言 1.1 研究背景与意义 在数字化时代，医疗行业正经历着深刻的变革，智能化技术的应用为其带来了前所未有的发展机遇。随着医疗数据的指数级增长，传统的医疗诊断和治疗方式逐渐难以满足现代医疗的需求。据统计，全球医疗数据量预计每年以 48% 的速度增长，到 2025 年将…
阅读更多...
250125-package

250125-package

1. 定义 包就是文件夹&#xff0c;作用是在大型项目中&#xff0c;避免不同人的编写的java文件出现同名进而导致报错&#xff1b;想象一个场景&#xff0c;在一个根目录中&#xff0c;每一个人都有自己的一个java文件夹&#xff0c;他可以将自己编写的文件放在该文件夹里&…
阅读更多...
FastExcel的使用

FastExcel的使用

前言 FastExcel 是一款基于 Java 的开源库&#xff0c;旨在提供快速、简洁且能解决大文件内存溢出问题的 Excel 处理工具。它兼容 EasyExcel&#xff0c;提供性能优化、bug 修复&#xff0c;并新增了如读取指定行数和将 Excel 转换为 PDF 的功能。 FastExcel 的主要功能 高性…
阅读更多...
Redis实战（黑马点评）——关于缓存（缓存更新策略、缓存穿透、缓存雪崩、缓存击穿、Redis工具）

Redis实战（黑马点评）——关于缓存（缓存更新策略、缓存穿透、缓存雪崩、缓存击穿、Redis工具）

redis实现查询缓存的业务逻辑 service层实现 Overridepublic Result queryById(Long id) {String key CACHE_SHOP_KEY id;// 现查询redis内有没有数据String shopJson (String) redisTemplate.opsForValue().get(key);if(StrUtil.isNotBlank(shopJson)){ // 如果redis的数…
阅读更多...
python3+TensorFlow 2.x（三）手写数字识别

python3+TensorFlow 2.x（三）手写数字识别

目录 代码实现 模型解析&#xff1a; 1、加载 MNIST 数据集&#xff1a; 2、数据预处理&#xff1a; 3、构建神经网络模型&#xff1a; 4、编译模型&#xff1a; 5、训练模型&#xff1a; 6、评估模型&#xff1a; 7、预测和可视化结果&#xff1a; 输出结果&#xff…
阅读更多...
基础项目——扫雷（c++）

基础项目——扫雷（c++）

目录 前言一、环境配置二、基础框架三、关闭事件四、资源加载五、初始地图六、常量定义七、地图随机八、点击排雷九、格子类化十、 地图类化十一、 接口优化十二、 文件拆分十三、游戏重开 前言 各位小伙伴们&#xff0c;这期我们一起学习出贪吃蛇以外另一个基础的项目——扫雷…
阅读更多...
[操作系统] 深入进程地址空间

[操作系统] 深入进程地址空间

程序地址空间回顾 在C语言学习的时&#xff0c;对程序的函数、变量、代码等数据的存储有一个大致的轮廓。在语言层面上存储的地方叫做程序地址空间&#xff0c;不同类型的数据有着不同的存储地址。 下图为程序地址空间的存储分布和和特性&#xff1a; 使用以下代码来验证一下…
阅读更多...
OpenCV：图像处理中的低通滤波

OpenCV：图像处理中的低通滤波

目录 简述 什么是低通滤波&#xff1f; 各种滤波器简介与实现 方盒滤波 均值滤波 中值滤波 高斯滤波 双边滤波 各种滤波的对比与应用场景 相关阅读 OpenCV基础&#xff1a;图像变换-CSDN博客 OpenCV&#xff1a;图像滤波、卷积与卷积核-CSDN博客 简述 低通滤波是一…
阅读更多...
32、【OS】【Nuttx】OSTest分析（1）：stdio测试（二）

32、【OS】【Nuttx】OSTest分析（1）：stdio测试（二）

背景 接上篇wiki 31、【OS】【Nuttx】OSTest分析&#xff08;1&#xff09;&#xff1a;stdio测试&#xff08;一&#xff09; 继续stdio测试的分析&#xff0c;上篇讲到标准IO端口初始化&#xff0c;单从测试内容来说其实很简单&#xff0c;没啥可分析的&#xff0c;但这几篇…
阅读更多...
OpenAI掀桌子！免费版ChatGPT，提供o3-mini模型！

OpenAI掀桌子！免费版ChatGPT，提供o3-mini模型！

逆天免费用 今天凌晨&#xff0c;OpenAI联合创始人兼首席执行官Sam Altman宣布了一个大消息——免费版ChatGPT&#xff0c;将提供o3-mini模型&#xff01; 网页们纷纷不淡定了 看来OpenAI&#xff0c;这o3-mini还没正式上线呢&#xff0c;就免费开放使用了。 不过还是要感谢…
阅读更多...
redis离线安装部署详解（包括一键启动）

redis离线安装部署详解（包括一键启动）

像上文一样 因为在学习的过程中没有查到一个详细的离线部署方案 所以在自己学习之后想要自己写一个文章 希望可以帮助后续学习redis离线部署的朋友少走一线弯路 首先就是下载安装包 可以自己在本地下载再传到机器上&#xff08;通过xftp或lrzsz都可&#xff09; http://d…
阅读更多...
图论汇总1

图论汇总1

1.图论理论基础 图的基本概念 二维坐标中&#xff0c;两点可以连成线&#xff0c;多个点连成的线就构成了图。 当然图也可以就一个节点&#xff0c;甚至没有节点&#xff08;空图&#xff09; 图的种类 整体上一般分为 有向图 和 无向图。 有向图是指 图中边是有方向的&a…
阅读更多...
小利特惠源码/生活缴费/电话费/油卡燃气/等充值业务类源码附带承兑系统

小利特惠源码/生活缴费/电话费/油卡燃气/等充值业务类源码附带承兑系统

全新首发小利特惠/生活缴费/电话费/油卡燃气/等充值业务类源码附带U商承兑系统 安装教程如下 图片：
阅读更多...
ESMC-600M蛋白质语言模型本地部署攻略

ESMC-600M蛋白质语言模型本地部署攻略

前言 之前介绍了ESMC-6B模型的网络接口调用方法&#xff0c;但申请token比较慢&#xff0c;有网友问能不能出一个本地部署ESMC小模型的攻略&#xff0c;遂有本文。 其实本地部署并不复杂&#xff0c;官方github上面也比较清楚了。 操作过程 环境配置&#xff1a;CUDA 12.1、…
阅读更多...
Java 实现Excel转HTML、或HTML转Excel

Java 实现Excel转HTML、或HTML转Excel

Excel是一种电子表格格式&#xff0c;广泛用于数据处理和分析&#xff0c;而HTM则是一种用于创建网页的标记语言。虽然两者在用途上存在差异&#xff0c;但有时我们需要将数据从一种格式转换为另一种格式&#xff0c;以便更好地利用和展示数据。本文将介绍如何通过 Java 实现 E…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023