如何在本机反应中关闭模态？答案

【问题标题】：How to close modal in react native?如何在本机反应中关闭模态？
【发布时间】：2019-01-10 15:34:11
【问题描述】：

当用户点击添加评论按钮时，我有添加评论按钮，他应该能够添加和保存评论。对于评论保存，我使用了 Modal。现在我想在用户点击 Modal 外部时关闭 Modal 我该怎么做 React Native ？

我指的是这个 -> Close react native modal by clicking on overlay? 但该解决方案不适用于我的情况。

注意：我添加了关闭模式的按钮，但我想通过在模式外部单击来关闭模式。

代码：

    <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' 
    },

【问题讨论】：

兄弟你在哪里添加了关闭模型的代码？
@Rizwanatta 我已经更新了代码，请检查一下。我想在用户单击模态外部时关闭模态，并且当前模态仅通过关闭按钮关闭。
你是把模型的代码放在组件的渲染中还是要为它制作一个单独的组件？
@Rizwanatta 我已将 Modal 放在组件的 render() 中

标签： javascript reactjs react-native

【解决方案1】：

请注意，在您发布的链接中，他们将onPressOut 用于<TouchableOpacity/> 组件，而您正在使用onPress，他在一开始也使用此if (!this.state.modalVisible) return null

【讨论】：

我已经更新了代码，请检查。我想在用户单击模态外部时关闭模态，并且当前模态仅通过关闭按钮关闭
您仍在使用onPress 而不是onPressOut
我已经更新了代码，但是当我点击添加评论按钮打开模式时，它没有打开模式，然后屏幕冻结我需要重新加载应用程序。
您是否按照您发布的链接中的示例在渲染顶部添加了if 语句？
检查此代码pastebin.com/9k7aaaGR它仍然无法工作打开模式后屏幕冻结

【解决方案2】：

您可以在模式中添加按钮来关闭它。试试

<Modal>
....
 <TouchableOpacity onPress={() =>this.setState({modalVisible:false}))}>
    <Text style={styles.saveCommentModal}>Close</Text>
 </TouchableOpacity>
....
</Modal>

【讨论】：

我已经添加了关闭模态的按钮，但我想通过在模态外部单击来关闭它。