本文详解如何在 react native 中构建一个带层级结构的可展开列表组件，支持父级与子级复选框独立控制、动态状态更新，并提供“获取所有已选项”功能，解决原代码中 checkbox 状态不响应、数据未同步等核心问题。
本文详解如何在 react native 中构建一个带层级结构的可展开列表组件，支持父级与子级复选框独立控制、动态状态更新，并提供“获取所有已选项”功能，解决原代码中 checkbox 状态不响应、数据未同步等核心问题。
在 React Native 中实现一个功能完备的可展开带复选框的列表组件，关键在于状态管理的层级化设计与事件传递的清晰性。原始代码中存在多个典型问题：ExpandableComponent 内部维护了局部 checkedItems 状态，导致父子项无法共享真实选中状态；子项点击未触发状态更新；且 isChecked() 仅用于读取，缺乏写入入口。下面我们将以专业、可维护的方式重构整个流程。
✅ 核心设计原则
- 状态统一提升：所有 checkbox 状态（包括父类目和子类目）均由父组件 TestExpandible（或 LoginScreen）集中管理，避免子组件状态碎片化；
- 状态嵌入数据结构：在 CONTENT 初始数据中为每个 item 和 subcategory 显式添加 isChecked: false 字段，便于直接渲染与更新；
- 解耦 UI 与逻辑：抽离 Checkbox 为纯展示 + 交互组件，仅接收 checked 和 onChange，职责单一、复用性强；
- 精准更新策略：使用 setState 的函数式更新（prevState => ...），确保基于最新状态计算，避免闭包 stale state 问题。
? 步骤一：创建可复用 Checkbox 组件
// components/Checkbox.tsx
import React from 'react';
import { TouchableOpacity, Image, StyleSheet } from 'react-native';
const Checkbox = ({ checked, onChange }: { checked: boolean; onChange: () => void }) => {
return (
<TouchableOpacity onPress={onChange} style={styles.container}>
<Image
style={styles.icon}
source={checked
? require('../assets/images/checked.png')
: require('../assets/images/unchecked.png')}
/>
</TouchableOpacity>
);
};
const styles = StyleSheet.create({
container: { padding: 4 },
icon: { height: 20, width: 20, tintColor: '#FEC432' },
});
export default Checkbox;? 提示：请确保 checked.png 和 unchecked.png 已正确放置于项目 assets 目录，并使用 require(...) 加载（不支持动态字符串路径）。
? 步骤二：重构 ExpandableComponent（无状态展示组件）
该组件不再持有任何状态，完全由 props 驱动：
- item.isChecked 控制父类目复选框；
- subItem.isChecked 控制每个子项复选框；
- onCheckboxChange(id) 统一处理所有复选框点击事件。
// components/ExpandableComponent.tsx
import React, { useEffect, useState } from 'react';
import {
View,
TouchableOpacity,
Text,
LayoutAnimation,
StyleSheet,
} from 'react-native';
import Checkbox from './Checkbox';
const ExpandableComponent = ({
item,
onClickFunction,
onCheckboxChange,
}: {
item: any;
onClickFunction: () => void;
onCheckboxChange: (id: number) => void;
}) => {
const [layoutHeight, setLayoutHeight] = useState(0);
useEffect(() => {
if (item.isExpanded) {
LayoutAnimation.configureNext(LayoutAnimation.Presets.easeInEaseOut);
setLayoutHeight(undefined); // auto height
} else {
setLayoutHeight(0);
}
}, [item.isExpanded]);
return (
<View>
{/* 父类目标题行 */}
<TouchableOpacity activeOpacity={0.8} onPress={onClickFunction} style={styles.header}>
<View style={styles.row}>
<Checkbox checked={item.isChecked} onChange={() => onCheckboxChange(item.id)} />
<Text style={styles.headerText}>{item.category_name}</Text>
</View>
</TouchableOpacity>
{/* 折叠内容区 */}
<View style={[styles.contentContainer, { height: layoutHeight }]}>
{item.subcategory.map((subItem: any, idx: number) => (
<TouchableOpacity
key={subItem.id}
style={styles.subItem}
onPress={() => onCheckboxChange(subItem.id)}
>
<View style={styles.row}>
<Checkbox checked={subItem.isChecked} onChange={() => onCheckboxChange(subItem.id)} />
<Text style={styles.subText}>
{idx + 1}. {subItem.val}
</Text>
</View>
</TouchableOpacity>
))}
</View>
</View>
);
};
const styles = StyleSheet.create({
header: { backgroundColor: '#F5FCFF', padding: 20 },
row: { flexDirection: 'row', alignItems: 'center' },
headerText: { fontSize: 16, fontWeight: '500', marginLeft: 8 },
contentContainer: { overflow: 'hidden' },
subItem: { paddingLeft: 20, paddingRight: 20, paddingVertical: 12, backgroundColor: '#fff' },
subText: { fontSize: 16, color: '#333', marginLeft: 8 },
});
export default ExpandableComponent;? 步骤三：主页面逻辑（状态管理 + 动作处理）
// screens/TestExpandible.tsx
import React, { useState, useEffect } from 'react';
import {
SafeAreaView,
ScrollView,
TouchableOpacity,
Text,
Platform,
UIManager,
LayoutAnimation,
} from 'react-native';
import ExpandableComponent from '../components/ExpandableComponent';
import { CONTENT } from '../data/CONTENT'; // 建议将 CONTENT 移至独立文件
const TestExpandible = () => {
const [listDataSource, setListDataSource] = useState(CONTENT);
// ✅ 核心：统一 toggle 处理函数
const toggleItem = (id: number) => {
setListDataSource((prev) =>
prev.map((item) => {
// 匹配父项
if (item.id === id) {
return { ...item, isChecked: !item.isChecked };
}
// 匹配子项
if (item.subcategory.some((sub: any) => sub.id === id)) {
const updatedSub = item.subcategory.map((sub: any) =>
sub.id === id ? { ...sub, isChecked: !sub.isChecked } : sub
);
return { ...item, subcategory: updatedSub };
}
return item;
})
);
};
// ✅ 获取所有已选 ID 及名称（含父+子）
const getCheckedItems = () => {
const result: { id: number; name: string }[] = [];
listDataSource.forEach((item) => {
if (item.isChecked) {
result.push({ id: item.id, name: item.category_name });
}
item.subcategory.forEach((sub: any) => {
if (sub.isChecked) {
result.push({ id: sub.id, name: sub.val });
}
});
});
console.log('✅ Selected Items:', result);
return result;
};
// ✅ 展开/折叠逻辑（支持单开模式）
const updateLayout = (index: number) => {
if (Platform.OS === 'android') {
LayoutAnimation.configureNext(LayoutAnimation.Presets.easeInEaseOut);
}
setListDataSource((prev) =>
prev.map((item, i) => ({
...item,
isExpanded: i === index ? !item.isExpanded : false,
}))
);
};
return (
<SafeAreaView style={{ flex: 1 }}>
<ScrollView>
{listDataSource.map((item, idx) => (
<ExpandableComponent
key={item.id}
item={item}
onClickFunction={() => updateLayout(idx)}
onCheckboxChange={toggleItem}
/>
))}
{/* ✅ 底部操作按钮 */}
<TouchableOpacity
style={styles.submitButton}
onPress={getCheckedItems}
>
<Text style={styles.submitText}>✅ 获取所有已选项</Text>
</TouchableOpacity>
</ScrollView>
</SafeAreaView>
);
};
const styles = StyleSheet.create({
submitButton: {
margin: 16,
padding: 14,
backgroundColor: '#007AFF',
borderRadius: 8,
alignItems: 'center',
},
submitText: {
color: '#fff',
fontSize: 16,
fontWeight: '600',
},
});
export default TestExpandible;⚠️ 注意事项 & 最佳实践
- 不要在 map 中使用 key={item.category_name}：应使用唯一 id（如 key={item.id}），避免重名导致渲染异常；
- Android 动画兼容性：务必在 useEffect 或组件挂载后调用 UIManager.setLayoutAnimationEnabledExperimental(true)（仅 Android）；
- 性能优化建议：若数据量大（>100 条），可结合 FlatList + getItemLayout 实现虚拟滚动；
- 扩展性增强：如需“全选/取消全选”功能，可在顶部添加独立按钮，遍历 listDataSource 批量更新 isChecked；
- TypeScript 强烈推荐：为 item 和 subcategory 定义明确接口（如 CategoryItem, SubCategoryItem），杜绝运行时字段错误。
通过以上重构，你将获得一个状态可控、逻辑清晰、易于测试与扩展的 Expandable List with Checkboxes 组件——真正符合 React 哲学的现代 React Native 实践方案。
