react-native Modal与SafeAreaView-wrapper无法正常工作

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

如果你使用react-native-safe-area-context并且你有模态问题，那么

      <Modal>
        <SafeAreaProvider>
          <SafeAreaView>
            
             // your modal content

          </SafeAreaView>
        </SafeAreaProvider>
      </Modal>

Answer 2

Put Safe是模态标记内的视图

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