使用SafeAreaView-wrapper的react-native模态不起作用

我们有一个FilterComponent来渲染模态，但是在iPhone X上，它的标题位于状态栏中。

我尝试使用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时，它仍位于状态栏中，您无法单击任何内容。

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

谢谢。

最佳答案

将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-wrapper的react-native模态不起作用，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/48538308/