React Native：点击Map渲染的列表项后在其下方添加自定义View

实现思路 #

要实现点击列表项后在其下方插入自定义View，核心是给每个列表项单独维护展开/收起状态，通过状态的切换来控制自定义View的显示与隐藏。

具体实现步骤 #

• 用状态存储每个列表项的展开状态（推荐用对象，以项的ID为键，布尔值为状态值）
• 给列表项绑定点击事件，点击时切换对应项的展开状态
• 在map渲染列表时，根据当前项的状态决定是否渲染下方的自定义View

完整示例代码 #

import React, { useState } from 'react';
import { View, Text, TouchableOpacity, StyleSheet } from 'react-native';

// 模拟列表数据源
const listData = [
  { id: '1', title: '第一列表项' },
  { id: '2', title: '第二列表项' },
  { id: '3', title: '第三列表项' },
];

// 自定义展开视图组件
const CustomExpandView = () => (
  <View style={styles.expandContainer}>
    <Text>这里是点击后展开的自定义内容</Text>
    <Text>可以根据需求添加任意组件或样式</Text>
  </View>
);

export default function ExpandableList() {
  // 存储各列表项的展开状态，初始都为收起
  const [expandedState, setExpandedState] = useState({});

  // 切换指定项的展开状态
  const handleItemClick = (itemId) => {
    setExpandedState(prevState => ({
      ...prevState,
      [itemId]: !prevState[itemId]
    }));
  };

  return (
    <View style={styles.container}>
      {listData.map(item => (
        <View key={item.id} style={styles.itemWrapper}>
          {/* 可点击的列表项头部 */}
          <TouchableOpacity 
            style={styles.itemHeader}
            onPress={() => handleItemClick(item.id)}
          >
            <Text style={styles.itemTitle}>{item.title}</Text>
          </TouchableOpacity>
          {/* 条件渲染：只有展开状态为true时才显示自定义View */}
          {expandedState[item.id] && <CustomExpandView />}
        </View>
      ))}
    </View>
  );
}

// 样式定义
const styles = StyleSheet.create({
  container: {
    flex: 1,
    paddingTop: 40,
    paddingHorizontal: 16,
    backgroundColor: '#f0f0f0',
  },
  itemWrapper: {
    marginBottom: 12,
    borderRadius: 8,
    overflow: 'hidden',
    backgroundColor: '#fff',
    shadowColor: '#000',
    shadowOffset: { width: 0, height: 2 },
    shadowOpacity: 0.1,
    shadowRadius: 4,
    elevation: 3,
  },
  itemHeader: {
    padding: 16,
  },
  itemTitle: {
    fontSize: 16,
    fontWeight: '500',
  },
  expandContainer: {
    padding: 16,
    borderTopWidth: 1,
    borderTopColor: '#eee',
  },
});

关键点说明 #

1. 状态管理：用对象expandedState来独立控制每个列表项的状态，避免一个状态影响所有项
2. 点击逻辑：handleItemClick通过解构之前的状态，只修改当前点击项的状态值，保证状态更新的准确性
3. 条件渲染：利用&&运算符，当expandedState[item.id]为true时，才渲染自定义的CustomExpandView组件

内容的提问来源于stack exchange，提问作者SAI