Реагируйте на Родную 3 кнопки и 3 Модальные

Question

Например, есть 3 кнопки и 3 модели, как способы сделать модель специфичной друг для друга?

Как 3 кнопки могут вызывать модель в соответствии с кнопкой, по которой вы нажали?

Answer 1

Проверьте это.Отредактировал мой код для полной версии

import React, {Component} from 'react';
import {StyleSheet, Text, View, SafeAreaView, Modal, TouchableOpacity} from 'react-native';

class App extends React.Component{
  constructor(props){
    super(props);

    this.state = {
      modal1: false,
      modal2: false,
      modal3: false,
    }
  }

  _toggleModal = () => {
    this.setState({
      modal1:false,
      modal2: false,
      modal3: false,
    })
  }

  render(){
    return(
      <SafeAreaView>
        {/*Modal 1*/}
        <Modal
          transparent={true}
          animationType={'none'}
          visible={this.state.modal1}
          onRequestClose={() => {console.log('close modal')}}>
          <View>
           <Text>Modal1</Text>
          </View>
          <TouchableOpacity onPress={() => this.setState({modal1:false})}>
           <Text>Hide Me!</Text>
          </TouchableOpacity>
        </Modal>
        {/*Modal 2*/}
        <Modal
          transparent={true}
          animationType={'none'}
          visible={this.state.modal2}
          onRequestClose={() => {console.log('close modal')}}>
          <View>
           <Text>Modal2</Text>
          </View>
          <TouchableOpacity onPress={() => this.setState({modal2:false})}>
           <Text>Hide Me!</Text>
          </TouchableOpacity>
        </Modal>
        {/*Modal 3*/}
        <Modal
          transparent={true}
          animationType={'none'}
          visible={this.state.modal3}
          onRequestClose={() => {console.log('close modal')}}>
          <View>
           <Text>Modal3</Text>
          </View>
          <TouchableOpacity onPress={() => this.setState({modal3:false})}>
           <Text>Hide Me!</Text>
          </TouchableOpacity>
        </Modal>

        {/*Front Page*/}
        <TouchableOpacity onPress={ () => this.setState({modal1:true})}>
          <Text>Click for Modal 1</Text>
        </TouchableOpacity>
        <TouchableOpacity onPress={ () => this.setState({modal2:true})}>
          <Text>Click for Modal 2</Text>
        </TouchableOpacity>
        <TouchableOpacity onPress={ () => this.setState({modal3:true})}>
          <Text>Click for Modal 3</Text>
        </TouchableOpacity>

      </SafeAreaView>
    )
  }

}

export default App