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

Question

我们有一个 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 上打开时，它仍然在状态栏中，你不能点击任何东西。

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

谢谢。

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