Question

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

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

-broadcast-address=127.0.0.1

当FilterModal在iPhoneX上开启时，它仍然在状态栏中，你无法点击任何东西。

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

感谢。

Answer 1

将安全视图放在模态标记

中

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 Modal与SafeAreaView-wrapper无法正常工作

2 个答案: