react-native 模态 SafeAreaView-wrapper 不工作

Question

我们有一个呈现模式的 FilterComponent，但在 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 上打开时，它仍然在状态栏中，您无法点击任何东西。

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

谢谢。

Answer 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>
);

Answer 2

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

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

react-native 模态 SafeAreaView-wrapper 不工作

react-native Modal with SafeAreaView-wrapper not working

react-native

react-native-ios

iphone-x