React Native 3 按钮和 3 模态答案

【问题标题】：React Native 3 button and 3 ModalReact Native 3 按钮和 3 模态
【发布时间】：2018-12-13 06:50:05
【问题描述】：

比如有 3 个按钮和 3 个模型，如何使模型彼此特定？

3个按钮如何根据被点击的按钮调出模型？

【问题讨论】：

【解决方案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

【讨论】：

是的，但是如何根据按钮调用每个模态？
模态2> 模态3>
试着弄清楚按钮的功能。将您的代码粘贴到您到目前为止所做的事情上，以便我可以帮助查看它
你能展示 this._toggleModal.method 吗？或者，如果您可以显示类 App 的整个代码 extends React.Component
非常感谢先生，它现在可以工作了，我只是打错了 visible={} 它应该是 isVisible={} 感谢您的逻辑 :))