如何通过在 React Native 中点击屏幕来关闭模式答案

【问题标题】：How to dismiss modal by tapping screen in ReactNative如何通过在 React Native 中点击屏幕来关闭模式
【发布时间】：2016-07-11 16:11:15
【问题描述】：

如何在 React Naitve 中通过点击 screen 来关闭模态视图，RN Modal 组件似乎没有提供 api

【问题讨论】：

标签： javascript ios reactjs react-native

【解决方案1】：

您可以在模态组件中使用 TouchableWithoutFeedback 组件，并带有一个关闭模态的 onPress 属性。

<Modal visible={booleanThatHandlesModalVisibility}>
  <TouchableWithoutFeedback onPress={() => funcToHideModal()}>
    <View>
    ...
    </View>
  </TouchableWithoutFeedback>
</Modal>

如果您想要在按下时不隐藏模式的模态区域，您可以添加另一个不带 onPress 属性的 TouchableWithoutFeedback 以在第一个事件之前捕获事件，如下所示：

<Modal visible={booleanThatHandlesModalVisibility}>
  <TouchableWithoutFeedback onPress={() => funcToHideModal()}>
    <View>
      <TouchableWithoutFeedback>
        <View>...</View>
      </TouchableWithoutFeedback>
    </View>
  </TouchableWithoutFeedback>
</Modal>

【讨论】：

我用这个想法解决了我的问题，虽然我看到TouchableOpacity 没有onPressOut，我不得不使用带有空操作的TouchableOpacity 而不是TouchableWithoutFeedback