如何在 React Native 中实现 'almost' 全屏模式？

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>

我不确定是否有我可以使用的道具，或者它可能不是原生的 react-native 模态？甚至不确定人们称这种类型的模态是什么！提前致谢。

Answer 1

这就是所谓的 presentationStyle！

添加道具 presentationStyle="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>

Answer 2

presentationStyle 属性控制模式的显示方式（通常在较大的设备上，例如 iPad 或大号 iPhone）所以对于 Android 我们可以使用 statusBarTranslucent 来确定我们的模式是否应该在系统状态栏下。

 <Modal
  statusBarTranslucent={true}
  animationType="fade"
  transparent={true}

如何在 React Native 中实现 'almost' 全屏模式？

How can I achieve an 'almost' full screen modal in React Native?

modal-dialog

react-native