android - React Native 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