如何在 React Native 应用程序中使用 Gluestackv2 中的 Accordion 组件？

Question

我使用了 Gluestack v2 中的

<Accordion />

示例，但是按加号/减号箭头时不会显示 中的文本。我不明白它是如何工作的。

这是一个具有三个元件的手风琴，每个元件应通过按加号单独打开并关闭一分钟。它们被命名为item-1，item-2，item-3，但是element中的每个部分都不起作用。

export const AddInfo = () => {
    const [selectedValues, setSelectedValues] = React.useState(['item-1', 'item-2', 'item-3']);
    return (
        <Accordion
            variant="unfilled"
            type="multiple"
            value={selectedValues}
            onValueChange={(item) => setSelectedValues(item)}
            className="m-5 w-[95%]"
        >
            <AccordionItem
                value="item-1"
                className="border-t border-b border-outline-300"
            >
                <AccordionHeader>
                    <AccordionTrigger>
                        {({ isExpanded }) => {
                            return (
                                <>
                                    <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 }) => {
                            return (
                                <>
                                    <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 }) => {
                            return (
                                <>
                                    <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>
    );
};

我翻阅了所有文档，但关于扩展如何工作的细节的信息很少。

Answer 1

上面的代码应该可以正常工作，但请确保您有正确的图标导入。对于gluestack-ui v2，建议使用

lucide-react-native

图标