如何在本机反应中关闭模态? [英] How to close modal in react native?
问题描述
当用户点击添加评论按钮时,我有添加评论按钮,他应该能够添加和保存评论.对于评论保存,我使用了 Modal.现在我想在用户点击 Modal 外部时关闭 Modal 我该怎么做这是 React Native?
I have add comment button when user clicks on add comment button he should be able to add and save comment. For comment save I have used Modal. Now I want to close Modal when user clicks outside Modal how can I do this is React Native ?
我指的是这个 -> 关闭本机反应通过单击叠加层来设置模态? 但该解决方案在我的情况下不起作用.
I am referring this -> Close react native modal by clicking on overlay? but the solution is not working in my case.
注意:我添加了关闭模态的按钮,但我想通过在模态外部单击来关闭它.
Note: I have added button to close modal but I want to close the modal by clicking outside it.
代码:
<View>
<Modal
animationType="slide"
transparent={true}
visible={this.state.modalVisible}
onRequestClose={() => {this.setModalVisible(false)}}>
<TouchableOpacity
activeOpacity={1}
onPressOut={() => {this.setModalVisible(true)}}
>
<ScrollView
directionalLockEnabled={true}
contentContainerStyle={styles.scrollModal}
>
<TouchableWithoutFeedback>
<View style={styles.commentModal}>
<View style={{marginLeft: 20, marginRight: 20}}>
<Text style={styles.addCommentModal}>Add a Comment</Text>
<View style={styles.textInputModal}>
<TextInput
editable = {true}
maxLength = {40}
multiline = {true}
onChangeText={(text) => this.setState({text})}
value={this.state.comment_text}
onChangeText={(text) => this.setState({comment_text: text})}
style={{borderRadius: 1}}
/>
</View>
<View style={styles.modalBtnContainer}>
<TouchableOpacity onPress={() => this.addComment(this.state.comment_text, logged_in_user.id, marketingPlanId)}>
<Text style={styles.saveCommentModal}>Save Comment</Text>
</TouchableOpacity>
</View>
<View style={styles.modalBtnContainer}>
<TouchableOpacity onPress={() => this.setModalVisible(false)}>
<Text style={styles.closeCommentModal}>Close</Text>
</TouchableOpacity>
</View>
</View>
</View>
</TouchableWithoutFeedback>
</ScrollView>
</TouchableOpacity>
</Modal>
</View>
CSS:
commentModal: {
position: 'absolute',
bottom: 0,
backgroundColor: '#fff',
height: height/2,
width: width
},
addCommentModal: {
fontSize: 18,
color: '#333',
marginTop: 20,
fontFamily: 'bold',
fontWeight: '500'
},
推荐答案
请注意,在您发布的链接中,他们将 onPressOut
用于 <TouchableOpacity/>
组件而你正在使用 onPress
,他也在一开始就使用了这个 if (!this.state.modalVisible) return null
notice that in the link you posted they are using onPressOut
for <TouchableOpacity/>
component and you are using onPress
, he is also using this at the very beginning if (!this.state.modalVisible) return null
这篇关于如何在本机反应中关闭模态?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!