带有 SafeAreaView-wrapper 的 react-native Modal 不起作用答案

【问题标题】：react-native Modal with SafeAreaView-wrapper not working带有 SafeAreaView-wrapper 的 react-native Modal 不起作用
【发布时间】：2020-10-22 08:41:19
【问题描述】：

我们有一个 FilterComponent 渲染一个 Modal，但在 iPhone X 上，它的 Header 位于状态栏中。

我尝试使用 SafeAreaView 渲染它，但似乎这不起作用：

return (
  <SafeAreaView>
    <Modal
      { ...defaultModalProps }
      onRequestClose={ close }
      style={ styles.container }
      visible={ visible }
    >
      <ModalNavbar close={ close }>
        Filter
      </ModalNavbar>
      <View style={ styles.content }>
        ...
      </View>
    </Modal>
  </SafeAreaView>
);

当 FilterModal 在 iPhoneX 上是 openend 时，它仍然在状态栏中，你不能点击任何东西。

知道如何解决这个问题吗？

谢谢。

【问题讨论】：

标签： react-native react-native-ios iphone-x

【解决方案1】：

将SafeAreaView 放入Modal 组件中

return (
  <Modal
    {...defaultModalProps}
    onRequestClose={close}
    style={styles.container}
    visible={visible}
  >
    <SafeAreaView style={{ flex: 1, backgroundColor: "transparent" }}>
      <ModalNavbar close={close}>Filter</ModalNavbar>
      <View style={styles.content}>...</View>
    </SafeAreaView>
  </Modal>
);

【讨论】：

这解决了我的问题，但我很困惑为什么。将模式放在 SafeAreaView 中不是更有意义吗？
@ksudu94 不，模态视图将覆盖整个屏幕。它不受调用者（父）大小的限制
如果backgroundColor 不是transparent，则看起来StatusBar 将不可见。我说的对吗？

【解决方案2】：

Modal 填满整个屏幕，因此您需要在Modal 内提供额外的间距。如果应用于 Modal 的父级，Margin / Padding 将不会影响 Modal。

<Modal {...}>
  <TouchableWithoutFeedback onPress={closeModal}>
    <SafeAreaView {...}>
      {...}
    </SafeAreaView>
  </TouchableWithoutFeedback>
</Modal>

【讨论】：