Как сделать динамически разборный

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, значение переменной должно меняться, но не не работает (Я новичок в реакции-родной)

Answer 1

Вам нужно использовать состояние для поддержания состояния вашего компонента, поэтому компонент будет повторно отображаться при изменении состояния

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>

    );
}