React Native FlatList中ListItem.Accordion全部展开问题求助

你当前的问题根源在于所有折叠面板共用了同一个布尔类型的状态值，导致点击任意面板时，所有面板的展开状态都会同步变化。要实现仅展开选中面板的效果，需要把状态改为记录当前展开项的ID，而非单一的布尔值。

修改步骤： #

• 将状态初始值改为null（表示初始无面板展开）
• 每个ListItem.Accordion通过判断当前项ID是否匹配状态值来控制展开状态
• 点击时更新状态：若当前项已展开则关闭，否则记录当前项ID

修改后的完整代码： #

import { View, Text, StyleSheet, FlatList } from 'react-native'
import React, { useState } from 'react'
import SearchBox from '../../components/SearchBox/SearchBox'
import { ListItem, Icon, Slider } from '@rneui/themed'
import { useSelector } from 'react-redux'
import { getAllPackages } from '../../feature/packageSlice'

const Rounds = () => {
    // 改为存储当前展开的item id，初始为null
    const [expandedId, setExpandedId] = useState(null)

    const pack = useSelector(getAllPackages)

    const renderItem = ({ item }) => {
        return (
            <ListItem.Accordion
                content={
                    <>
                        <ListItem.Content>
                            <ListItem.Title style={styles.header}>
                                {item.name}
                            </ListItem.Title>
                        </ListItem.Content>
                    </>
                }
                // 判断当前item是否为展开状态
                isExpanded={expandedId === item.id}
                // 点击切换展开/收起状态
                onPress={() => {
                    setExpandedId(expandedId === item.id ? null : item.id)
                }}
            >
                <View style={styles.card}>
                    <Text style={styles.font}>Water Supply Pressure</Text>
                </View>
            </ListItem.Accordion>
        )
    }

    return (
        <View>
            <FlatList
                data={pack}
                renderItem={renderItem}
                keyExtractor={(item) => item.id.toString()}
            />
        </View>
    )
}

export default Rounds

额外说明： #

• 如果需要支持同时展开多个面板，可以将expandedId改为数组，点击时添加/移除对应ID即可
• keyExtractor中把item.id转为字符串，避免非字符串类型ID可能引发的渲染问题

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