如何在 React Native 中实现“几乎”全屏模式？

Question

我不确定你怎么称呼这种类型的模态，但 iOS 上流行的一种模态并不能完全全屏显示，也许距顶部有 10% 的边距。这是一张图片：

这是我的标准模态设置：

<Modal visible={imageViewerVisible} transparent={true} onRequestClose={() => this.setImageViewerVisible(false)} style={{ backgroundColor: 'black'}}>
      <ImageViewer imageUrls={ images } index={0} onSwipeDown={() => this.setImageViewerVisible(false) } enableSwipeDown={true} />
</Modal>

我不确定是否有我可以使用的道具，或者它可能不是本机反应本机模式？甚至不知道人们如何称呼这种类型的模态！提前致谢。

Answer 1

这就是所谓的presentationStyle！

添加 proppresentationStyle="pageSheet" 就可以了。

<Modal presentationStyle="pageSheet" visible={imageViewerVisible} transparent={true} onRequestClose={() => this.setImageViewerVisible(false)} style={{ backgroundColor: 'black'}}>
      <ImageViewer imageUrls={ images } index={0} onSwipeDown={() => this.setImageViewerVisible(false) } enableSwipeDown={true} />
</Modal>