我目前遇到一个问题,我可以很好地打开我的本机反应模式,但是一旦打开,我似乎无法关闭它。我大约三周前才开始使用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的熟悉程度有限,因此很难围绕框架功能的某些方面进行思考……我可能只是在代码中的某个地方犯了一个愚蠢的错误。
感谢您对这个问题的帮助!
答案 0 :(得分:4)
您几乎已经掌握了它,但是我们可以做一些调整以使其按需运行。
由于您的DisplayModal
没有自己的状态,因此该状态必须由其父组件控制。因此,考虑到这一点,我们可以执行以下操作。首先,将一个名为closeDisplay
的附加道具传递给DisplayModal
。我们将传递一个将display
中的state
属性设置为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>
)
请注意,onPress
组件中Button
的{{1}}函数,我们正在调用函数DisplayModal
。然后,此函数会在父组件中设置状态,然后将其传回给closeDisplay()
组件,使其隐藏。