当前位置：首页 > news >正文

React Native第五章

news 2025/11/5 7:13:19

好的 👍 我来给你写一个 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 (<FlatListdata={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 (<SectionListsections={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>`	下拉刷新组件