如何制作動態可折疊的

Question

 import React from 'react'; import Collapsible from 'react-native-collapsible'; import Icon from 'react-native-vector-icons/MaterialIcons'; import { Container, Nav, NavText, NavItem } from './styles'; export default function Cards() { let isCollapsible = false; return ( <Container> <Nav onpress={() => { if (isCollapsible == false) { isCollapsible = true } else { isCollapsible = false } }}> <NavItem> <Icon name="favorite" size={20} color="#fff"></Icon> <NavText>Motivo 1</NavText> </NavItem> </Nav> <Collapsible style={{ borderWidth: 1, borderColor: "#fff", padding: 10, marginTop: 5, marginBottom: 5, borderRadius: 20 }} collapsed={isCollapsible}> <NavText>Teste</NavText> </Collapsible> </Container> ); }

我試圖根據我的變量 isCollapsible 的值制作一個可折疊的，理論上當我按下 Nav 時，變量的值必須改變，但不起作用。 （我是 react-native 的新手）

Answer 1

您需要使用 state 來維護您的組件 state，因此當 state 更改時組件將重新渲染

 import React from 'react'; import Collapsible from 'react-native-collapsible'; import Icon from 'react-native-vector-icons/MaterialIcons'; import { Container, Nav, NavText, NavItem } from './styles'; export default function Cards() { const [isCollapsible, setIsCollapsible] = React.useState(true) return ( <Container> <Nav onpress={() => {setIsCollapsible(:isCollapsible)}}> <NavItem> <Icon name="favorite" size={20} color="#fff"></Icon> <NavText>Motivo 1</NavText> </NavItem> </Nav> <Collapsible style={{ borderWidth, 1: borderColor, "#fff": padding, 10: marginTop, 5: marginBottom, 5: borderRadius; 20 }} collapsed={isCollapsible}> <NavText>Teste</NavText> </Collapsible> </Container> ); }