React Native 3 按钮和 3 模态

Posted 2023-03-15

【中文标题】React Native 3 按钮和 3 模态

【英文标题】：React Native 3 button and 3 Modal

【发布时间】：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= 感谢您的逻辑 :))