如何通过在 ReactNative 中点击屏幕来关闭模式

IT技术 javascript ios reactjs react-native
2021-05-19 17:44:55

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

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>
其它你可能感兴趣的问题
上一篇使用小屏幕时强制在按钮文本内换行 下一篇如何修复 babel react “Uncaught SyntaxError: Unexpected token <”