1

Estou tentando criar um componente Modal que generico que possa ser reutilizado em outras partes do aplicativo. Entretanto não estou conseguindo realizar o controle de abertura do mesmo. Segue minha tentativa:

Modal

 export default class ModalComponent extends Component {
    constructor(props) {
        super(props);

        this.state = { isVisible: this.props.isVisible }
        this.closeModal = this.closeModal.bind(this);
    }

    closeModal() {
        let s = this.state;
        s.isVisible = false;
        this.setState(s);
    }

    render() {
        return (
            <Modal animationType='slide' visible={this.state.isVisible}>
                <TouchableOpacity onPress={this.closeModal}>
                    <Text> Fechar </Text>
                </TouchableOpacity>

                <View style={styles.modal}>
                    <Text> Empresa:  </Text>
                </View>
            </Modal>
        );
    }
}

Utilização no código principal

export default class Home extends Component {
    constructor(props) {
        super(props);
        this.state = {
            data: [
                { id: "00", name: "Estabelecimento 1" },
                { id: "01", name: "Estabelecimento 2" },
                { id: "02", name: "Estabelecimento 3" },
                { id: "03", name: "Estabelecimento 4" },
                { id: "04", name: "Estabelecimento 5" },
                { id: "05", name: "Estabelecimento 6" },
                { id: "06", name: "Estabelecimento 7" },
                { id: "07", name: "Estabelecimento 8" },
                { id: "08", name: "Estabelecimento 9" },
                { id: "09", name: "Estabelecimento 10" }
            ],

            modalVisible: false
        }

        this.openModal = this.openModal.bind(this);
    }

    // Controla a visibilidade do Modal
    openModal() {
        let s = this.state;
        s.modalVisible = true;
        this.setState(s);
    }


    // Rendereiza os item da lista
    renderItem(item) {
        return (
            <TouchableOpacity onPress={this.openModal} style={styles.item}>
                <Text style={styles.text}> {item.name} </Text>
                <Image style={styles.image} source={require('./images/noimage.png')} />
                <Text> Commodo mollit in ad anim fugiat irure. Fugiat sint ea commodo nulla sunt et eu mollit irure in sit consequat eu.  </Text>

                <ModalComponent data={item} isVisible={this.state.modalVisible} />
            </TouchableOpacity>
        );
    }

    render() {
        return (
            <View style={styles.body}>
                <Image style={styles.headerImg} source={require('./images/400x300.png')} />
                <View style={styles.empresas}>
                    <FlatList data={this.state.data}
                        keyExtractor={item => item.id}
                        numColumns={2}
                        renderItem={({ item }) => this.renderItem(item)} />
                </View>
            </View>
        );
    }
}
1
  • 1
    Você já experimentou usar a biblioteca "react-native-modal"? Commented 23/01/2021 às 2:11

1 Resposta 1

0

O que eu recomendaria você fazer é o seguinte:

1 - Retirar o modal do "renderItem". Deixar ele no final do FlatList. Ele vai ser atualizado de acordo com o item da lista selecionado. 2 - Enviar para o componente modal por props a função de fechar o modal. Essa função deve ser implementada no componente pai.

Eu fiz ajustes no seu código. O componente pai ficaria assim:

export default class Home extends Component {
    constructor(props) {
        super(props);
        this.state = {
            data: [
                { id: "00", name: "Estabelecimento 1" },
                { id: "01", name: "Estabelecimento 2" },
                { id: "02", name: "Estabelecimento 3" },
                { id: "03", name: "Estabelecimento 4" },
                { id: "04", name: "Estabelecimento 5" },
                { id: "05", name: "Estabelecimento 6" },
                { id: "06", name: "Estabelecimento 7" },
                { id: "07", name: "Estabelecimento 8" },
                { id: "08", name: "Estabelecimento 9" },
                { id: "09", name: "Estabelecimento 10" }
            ],

            modalVisible: false,
			registro: {}
        }
    }

    // Controla a visibilidade do Modal
    openModal = (item) =>  {
        this.setsState({modalVisible:true, item: registro: item});
    }
	
	closeModal() {
        this.setsState({modalVisible:false});
    }

    // Rendereiza os item da lista
    renderItem(item) {
        return (
            <TouchableOpacity onPress={this.openModal(item)} style={styles.item}>
                <Text style={styles.text}> {item.name} </Text>
                <Image style={styles.image} source={require('./images/noimage.png')} />
                <Text> Commodo mollit in ad anim fugiat irure. Fugiat sint ea commodo nulla sunt et eu mollit irure in sit consequat eu.  </Text>
            </TouchableOpacity>
        );
    }

    render() {
        return (
            <View style={styles.body}>
                <Image style={styles.headerImg} source={require('./images/400x300.png')} />
                <View style={styles.empresas}>
                    <FlatList data={this.state.data}
                        keyExtractor={item => item.id}
                        numColumns={2}
                        renderItem={({ item }) => this.renderItem(item)} />
					<ModalComponent data={this.state.registro} isVisible={this.state.modalVisible} fechar={this.closeModal.bind(this)} />	
                </View>
            </View>
        );
    }
}

E o componente filho ficaria desta forma:

export default class ModalComponent extends Component {
    constructor(props) {
        super(props);
    }

    render() {
        return (
            <Modal animationType='slide' visible={this.props.isVisible}>
                <TouchableOpacity onPress={this.props.fechar}>
                    <Text> Fechar </Text>
                </TouchableOpacity>

                <View style={styles.modal}>
                    <Text> Empresa:  </Text>
                </View>
            </Modal>
        );
    }
}

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .