在外部单击时关闭模式答案

【问题标题】：Close modal when clicked outside在外部单击时关闭模式
【发布时间】：2021-03-01 06:27:48
【问题描述】：

我已经为模态编写了上述可重用组件，但是当我在模态外部单击时我想关闭模态，因为我使用了 TouchableWithoutFeedback 但 onPress 我添加了道具，我不想使用我想要的道具在此代码本身中添加逻辑，这样我就不必在我将使用此组件的任何地方调用该道具。请告诉我如何实现这一目标

<Modal animationType={ANIMATIONS.SlideType} transparent={true} visible={props.visible}>
      <TouchableWithoutFeedback onPress={props.dismissModal}>
        <View style={Styles.opacityContainer}></View>
      </TouchableWithoutFeedback>
      <View style={Styles.container}>
        <View style={Styles.headerContainer}>
          <View style={[Styles.header, Styles.directionRow]}>
            <View>
              <Text style={Styles.headerText}>{bottomSheetStrings.addNew}</Text>
            </View>
            <View style={SheetStyles.iconContainer}>
              <IMIcon
                name={Icon.cancel}
                size={18}
                color={colors.grayish}
                iconsStyle={Styles.closeButton}
              />
            </View>
          </View>
        </View>
        <View style={Styles.viewContainer}>
          <SafeAreaView>
            <FlatList
              horizontal={false}
              data={props.navData}
              renderItem={renderActions}
              keyExtractor={(item) => item.id}
              numColumns={4}
            />
          </SafeAreaView>
        </View>
      </View>
    </Modal>

【问题讨论】：

这意味着您必须将模态框的可见性状态保持在模态框内，这是您不想做的事情
当我在这个Modal之外点击的时候，我想在这个文件中自己写逻辑，这样Modal就会被关闭。

标签： react-native

【解决方案1】：

尝试使用 https://github.com/react-native-modal/react-native-modal npm，它提供了比 react native inbuild modal 更多的可访问性。

我们可以简单地处理 onBackdropPress 事件来关闭模式。

例如：

<Modal isVisible={isVisible} onBackdropPress={() => setVisible(false)} >
    <View style={{ height: 100, alignItems: "center", justifyContent: "center" }}>
      <Text>I am the modal content!</Text>
    </View>
  </Modal>

【讨论】：

我正在使用来自 react-native 的 Modal，而 onBackdropPress 在此不可用
是的，onBackdropPress 方法在 react-native 的 Modal 中不可用，如果我们必须访问此类功能，请尝试使用 github.com/react-native-modal/react-native-modal npm 包
@Jigneshmayani 和我提供的解决方案都可以解决您的问题。我建议您使用 Jigneshmayani 提供的那个，因为它更容易实现和理解。

【解决方案2】：

只需将Modal 的内容包装在TouchableWithoutFeedback 中，然后从那里设置可见性状态。

这里是完整的例子：Expo Snack

import React, { useState } from 'react';
import {
  Alert,
  Modal,
  StyleSheet,
  Text,
  Pressable,
  View,
  TouchableWithoutFeedback,
} from 'react-native';

const App = () => {
  const [modalVisible, setModalVisible] = useState(false);

  return (
    <View style={styles.centeredView}>
      <Modal
        animationType="slide"
        transparent={true}
        visible={modalVisible}
        onRequestClose={() => {
          Alert.alert('Modal has been closed.');
          this.setModalVisible(false);
        }}>
        <TouchableWithoutFeedback onPressOut={() => setModalVisible(false)}>
          <View style={styles.centeredView}>
            <TouchableWithoutFeedback>
              <View style={styles.modalView}>
                <Text style={styles.modalText}>Hello World!</Text>
                <Pressable
                  style={[styles.button, styles.buttonClose]}
                  onPress={() => setModalVisible(false)}>
                  <Text style={styles.textStyle}>Hide Modal</Text>
                </Pressable>
              </View>
            </TouchableWithoutFeedback>
          </View>
        </TouchableWithoutFeedback>
      </Modal>
      <Pressable
        style={[styles.button, styles.buttonOpen]}
        onPress={() => setModalVisible(true)}>
        <Text style={styles.textStyle}>Show Modal</Text>
      </Pressable>
    </View>
  );
};

const styles = StyleSheet.create({
  centeredView: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    marginTop: 22,
  },
  modalView: {
    margin: 20,
    backgroundColor: 'white',
    borderRadius: 20,
    padding: 100,
    alignItems: 'center',
    shadowColor: '#000',
    shadowOffset: {
      width: 0,
      height: 2,
    },
    shadowOpacity: 0.25,
    shadowRadius: 4,
    elevation: 5,
  },
  button: {
    borderRadius: 20,
    padding: 10,
    elevation: 2,
  },
  buttonOpen: {
    backgroundColor: '#F194FF',
  },
  buttonClose: {
    backgroundColor: '#2196F3',
  },
  textStyle: {
    color: 'white',
    fontWeight: 'bold',
    textAlign: 'center',
  },
  modalText: {
    marginBottom: 15,
    textAlign: 'center',
  },
});

export default App;

【讨论】：