如何通过点击ReactNative中的屏幕来关闭模态

时间:2016-07-11 16:11:15

标签: javascript ios reactjs react-native

如何通过点击React Naitve中的屏幕来关闭模态视图,RN模态组件似乎不提供api

1 个答案:

答案 0 :(得分:24)

您可以在模态组件中使用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>