React Native中Gluestack v2 Accordion组件问题：点击箭头内容不显示

你的Accordion组件展开功能失效的核心问题在于multiple模式下的状态更新逻辑错误。在multiple类型的Accordion中，onValueChange的回调参数是当前被点击项的value，而非直接替换整个选中数组。你当前的代码直接将单个item值赋值给selectedValues，导致状态从数组变成字符串，破坏了组件的展开判断逻辑。

修正步骤： #

1. 调整onValueChange的处理逻辑，对当前点击的项进行「存在则移除，不存在则添加」的数组更新操作
2. 确保状态始终保持数组类型，匹配multiple模式的要求

修正后的完整代码： #

export const AddInfo = () => {
    const [selectedValues, setSelectedValues] = React.useState(['item-1', 'item-2', 'item-3']);
    
    // 正确处理多选模式下的状态切换
    const handleValueChange = (itemValue) => {
        setSelectedValues(prev => {
            if (prev.includes(itemValue)) {
                // 移除已选中的项
                return prev.filter(val => val !== itemValue);
            } else {
                // 添加未选中的项
                return [...prev, itemValue];
            }
        });
    };

    return (
        <Accordion
            variant="unfilled"
            type="multiple"
            value={selectedValues}
            onValueChange={handleValueChange}
            className="m-5 w-[95%]"
        >
            <AccordionItem
                value="item-1"
                className="border-t border-b border-outline-300"
            >
                <AccordionHeader>
                    <AccordionTrigger>
                        {({ isExpanded }) => (
                            <>
                                <AccordionTitleText>
                                    Exploring Nature's Wonders
                                </AccordionTitleText>
                                {isExpanded ? (
                                    <AccordionIcon as={MinusIcon} />
                                ) : (
                                    <AccordionIcon as={PlusIcon} />
                                )}
                            </>
                        )}
                    </AccordionTrigger>
                </AccordionHeader>
                <AccordionContent>
                    <AccordionContentText>
                        Embark on a journey through the breathtaking landscapes and diverse
                        ecosystems of our planet. From majestic mountains to serene oceans, discover
                        the beauty that nature has to offer.
                    </AccordionContentText>
                </AccordionContent>
            </AccordionItem>

            <AccordionItem value="item-2">
                <AccordionHeader>
                    <AccordionTrigger>
                        {({ isExpanded }) => (
                            <>
                                <AccordionTitleText>
                                    The Art of Culinary Delights
                                </AccordionTitleText>
                                {isExpanded ? (
                                    <AccordionIcon as={MinusIcon} />
                                ) : (
                                    <AccordionIcon as={PlusIcon} />
                                )}
                            </>
                        )}
                    </AccordionTrigger>
                </AccordionHeader>
                <AccordionContent>
                    <AccordionContentText>
                        Indulge your senses in a culinary adventure. Uncover the secrets behind
                        delectable dishes, learn about unique flavor profiles, and ignite your
                        passion for cooking.
                    </AccordionContentText>
                </AccordionContent>
            </AccordionItem>
            <AccordionItem
                value="item-3"
                className="border-t border-b border-outline-300"
            >
                <AccordionHeader>
                    <AccordionTrigger>
                        {({ isExpanded }) => (
                            <>
                                <AccordionTitleText>
                                    Mastering the Creative Process
                                </AccordionTitleText>
                                {isExpanded ? (
                                    <AccordionIcon as={MinusIcon} />
                                ) : (
                                    <AccordionIcon as={PlusIcon} />
                                )}
                            </>
                        )}
                    </AccordionTrigger>
                </AccordionHeader>
                <AccordionContent>
                    <AccordionContentText>
                        Immerse yourself in the world of creativity. Unleash your artistic
                        potential, whether it's through writing, painting, or any other form of
                        expression.
                    </AccordionContentText>
                </AccordionContent>
            </AccordionItem>
        </Accordion>
    );
};

补充说明： #

• 当Accordion的type设为multiple时，value属性必须是数组类型，组件会根据数组中的值判断哪些项需要展开
• isExpanded参数由组件内部根据value自动计算，无需手动维护，你之前的用法是正确的

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