所以我在下面有一个初始屏幕,你可以点击一个按钮并显示一个模态屏幕:
import SettingsScreen from './SettingsScreen';
...
export default class InitialScreen extends Component {
constructor(props) {
super(props);
this.state = {modalVisible: false};
}
setModalVisible(visible) {
this.setState({modalVisible: visible});
}
render() {
return (
<View>
<NavigationBar
title={{ title: 'Initial Screen', tintColor: 'white', }}
leftButton={
<TouchableOpacity onPress={() => {
this.setModalVisible(!this.state.modalVisible)
}}>
<Image style={styles.leftButton} source={require('./../img/settings.png')} />
</TouchableOpacity>
}
rightButton={{ title: 'Forward', tintColor: 'white' }}
style={{ backgroundColor: '#2196F3', }}
statusBar={{ tintColor: '#1976D2', style: 'light-content' }}
/>
<Modal
animationType={"slide"}
transparent={false}
visible={this.state.modalVisible}
onRequestClose={() => {alert("Modal has been closed.")}}
>
<SettingsScreen />
</Modal>
</View>
);
}
}
它有效,但现在在我的模态屏幕中,我有一个按钮,可以让你关闭模态:
import ...
export default class ModalScreen extends Component {
render() {
return (
<View>
<TouchableOpacity onPress={() => {
this.props.setModalVisible(!this.state.modalVisible)
}}>
<Image source={require('./../img/close.png')} />
</TouchableOpacity>
</View>
);
}
}
但它给了我一个错误,说this.props.setModalVisible(!this.state.modalVisible)
不是一个功能。
我如何解除ModalScreen中的模态?
谢谢。
答案 0 :(得分:1)
你应该将 setModalVisible()函数传递给模态组件
初始组件:
<ModalComponent closeModal={this.setModalVisible} />
并在ModalComponent上调用它:
<TouchableOpacity onPress={() => {
this.props.closeModal(false)
}}>
<Image source={require('./../img/close.png')} />
</TouchableOpacity>
答案 1 :(得分:0)
对于本机使用ES6风格的自定义函数:
setModalVisible = (visible) => {
this.setState({modalVisible: visible});
}
代码应该是:this.setModalVisible(!this.state.modalVisible)