如何关闭 React 原生模态

Question

我目前遇到了一个问题，我可以很好地打开我的反应原生模态，但是一旦打开，我似乎就无法关闭它。大约三周前，我刚刚开始使用 react-native，所以我对此非常陌生。

我

尝试实施我在网上找到的解决方案，但似乎没有什么对我有用。打开功能很棒，似乎运行良好，但是在关闭模态时，我尝试过的所有事情似乎都没有赋予模态这种能力。我无法在任何地方为我的确切问题找到可靠的解决方案！

这就是我打开模态的方式。

constructor(props) {
 super(props);
  this.state = {
   refreshing: false,
    display: false
  };
}
triggerModal() {
 this.setState(prevState => {
  return {
    display: true
   }
  });
}
<View>
  <Button onPress = { () => this.triggerModal() } title = "Open Modal"></Button>
  <DisplayModal display = { this.state.display } />
</View>

这是模态本身，我正在尝试使用按钮关闭它。

import React from 'react'
import { Modal, View, Image, Text, StyleSheet, Button } from 'react-native';
const DisplayModal = (props) => (
  <Modal visible={ props.display } animationType = "slide" 
onRequestClose={ this.display }>
<View>
  <Button title="close" onPress = { () => !props.display }></Button>
</View>
</Modal>
)
export default DisplayModal;

由于我对 react-native 的熟悉程度有限，因此很难理解框架的某些方面是如何运作的......我可能只是在代码中的某个地方犯了一个愚蠢的错误。

我感谢对这个问题的任何帮助！

Answer 1

您几乎已经拥有了它，但是我们可以进行一些调整以使其按您想要的方式工作。

由于DisplayModal没有自己的状态，因此状态必须由其父组件控制。因此，考虑到这一点，我们可以执行以下操作。首先将一个名为closeDisplay的附加道具传递给DisplayModal。我们将传递一个函数，该函数将 state 中的 display 属性设置为 false 。

<DisplayModal 
  display={this.state.display} 
  closeDisplay={() => this.setState({display: false})} // <- we are passing this function
/>

然后在我们的DisplayModal组件中，我们将调用该函数来关闭模态。 因此，您的DisplayModal组件应如下所示：

const DisplayModal = (props) => (
  <Modal 
    visible={ props.display } 
    animationType = "slide" 
    onRequestClose={ this.display }>
    <View>
      <Button 
       title="close" 
       onPress = { () => props.closeDisplay() }> // <- here we call the function that we passed
    </Button>
    </View>
  </Modal>
)

请注意，DisplayModal组件中Button的onPress函数，我们正在调用该函数closeDisplay() 。然后，此函数在父组件中设置状态，而父组件又会传递回DisplayModal组件，从而导致其隐藏。