React Native第五章

好的 👍 我来给你写一个 React Native 示例，完整演示：

• FlatList（普通列表）
• SectionList（分组列表）
• RefreshControl（下拉刷新）

这些是 React Native 常用的列表组件，掌握这三个基本能覆盖 90% 的列表场景。

---

🧩 一、FlatList + RefreshControl 示例

这是一个最常见的带下拉刷新的普通列表。

import React, { useState, useCallback } from 'react';
import { View, Text, FlatList, RefreshControl, StyleSheet } from 'react-native';

const FlatListDemo = () => {
  const [data, setData] = useState(Array.from({ length: 10 }, (_, i) => `Item ${i + 1}`));
  const [refreshing, setRefreshing] = useState(false);

  // 下拉刷新逻辑
  const onRefresh = useCallback(() => {
    setRefreshing(true);
    setTimeout(() => {
      setData(prev => [`New Item ${Date.now()}`, ...prev]); // 模拟新增数据
      setRefreshing(false);
    }, 1500);
  }, []);

  // 渲染每一项
  const renderItem = ({ item }) => (
    <View style={styles.item}>
      <Text style={styles.itemText}>{item}</Text>
    </View>
  );

  return (
    <FlatList
      data={data}
      renderItem={renderItem}
      keyExtractor={(item, index) => index.toString()}
      refreshControl={
        <RefreshControl refreshing={refreshing} onRefresh={onRefresh} title="正在刷新..." />
      }
      ListHeaderComponent={<Text style={styles.header}>FlatList 示例</Text>}
    />
  );
};

const styles = StyleSheet.create({
  header: { fontSize: 18, fontWeight: 'bold', padding: 10, backgroundColor: '#eee' },
  item: { padding: 15, borderBottomWidth: 1, borderBottomColor: '#ccc' },
  itemText: { fontSize: 16 },
});

export default FlatListDemo;

✅ 关键点说明：

• data：列表数据
• renderItem：渲染每个元素
• keyExtractor：每个元素的唯一 key
• refreshControl：配合 FlatList 或 ScrollView 使用的下拉刷新组件
• onRefresh：刷新时执行的回调函数
• refreshing：布尔值，控制刷新动画的显示

---

🧩 二、SectionList + RefreshControl 示例

SectionList 用于显示 分组列表（如通讯录 A-Z、分类商品等）。

import React, { useState, useCallback } from 'react';
import { View, Text, SectionList, RefreshControl, StyleSheet } from 'react-native';

const SectionListDemo = () => {
  const [refreshing, setRefreshing] = useState(false);
  const [sections, setSections] = useState([
    { title: '🍎 水果', data: ['苹果', '香蕉', '橘子'] },
    { title: '🥬 蔬菜', data: ['西红柿', '黄瓜', '生菜'] },
  ]);

  const onRefresh = useCallback(() => {
    setRefreshing(true);
    setTimeout(() => {
      setSections(prev => [
        { title: '🆕 新增分组', data: ['新项目 ' + Date.now()] },
        ...prev,
      ]);
      setRefreshing(false);
    }, 1500);
  }, []);

  return (
    <SectionList
      sections={sections}
      keyExtractor={(item, index) => item + index}
      renderItem={({ item }) => (
        <View style={styles.item}>
          <Text>{item}</Text>
        </View>
      )}
      renderSectionHeader={({ section: { title } }) => (
        <View style={styles.header}>
          <Text style={styles.headerText}>{title}</Text>
        </View>
      )}
      refreshControl={<RefreshControl refreshing={refreshing} onRefresh={onRefresh} />}
      ListHeaderComponent={<Text style={styles.listHeader}>SectionList 示例</Text>}
    />
  );
};

const styles = StyleSheet.create({
  listHeader: { fontSize: 18, fontWeight: 'bold', padding: 10, backgroundColor: '#eee' },
  header: { backgroundColor: '#f2f2f2', padding: 10 },
  headerText: { fontWeight: 'bold' },
  item: { padding: 15, borderBottomWidth: 1, borderBottomColor: '#ddd' },
});

export default SectionListDemo;

✅ 关键点说明：

• sections：是一个数组，每个对象包含 { title, data }
• renderSectionHeader：渲染分组标题
• renderItem：渲染每组中的每一项
• keyExtractor：唯一 key
• refreshControl：同样支持下拉刷新

---

🧩 三、RefreshControl 属性介绍

属性	类型	说明
refreshing	boolean	是否显示刷新指示器
onRefresh	() => void	用户下拉时触发的回调
title	string	下拉刷新时显示的文字（iOS）
colors	string[]	Android 刷新指示器颜色数组
progressBackgroundColor	string	Android 指示器背景色
tintColor	string	iOS 刷新指示器颜色
titleColor	string	iOS 标题颜色

---

🧩 四、额外：FlatList 常用属性一览

属性	类型	说明
data	any[]	列表数据
renderItem	({item, index}) => ReactNode	渲染函数
keyExtractor	(item, index) => string	唯一 key
ListHeaderComponent	ReactNode	列表头
ListFooterComponent	ReactNode	列表尾
ItemSeparatorComponent	ReactNode	项之间的分隔线
onEndReached	() => void	滚动到底部时触发（常用于加载更多）
onEndReachedThreshold	number	触发加载更多的阈值（0~1）
refreshControl	<RefreshControl>	下拉刷新组件

---

✅ 总结

场景	推荐组件
普通列表	FlatList
分组/带标题列表	SectionList
下拉刷新	RefreshControl（与上述任一结合）

---