我使用了 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>
);
};
我翻阅了所有文档,但关于扩展如何工作的细节的信息很少。
上面的代码应该可以正常工作,但请确保您有正确的图标导入。对于gluestack-ui v2,建议使用
lucide-react-native
图标