如何在打开Modal时禁用背景视图的变换效果？

我想要打开Modal时背景保持原位，不缩小，呈现BottomSheet样式，当前代码如下：

<Modal
  animationType="slide"
  onRequestClose={() => openBottomSheet(false)}
  transparent
  style={{
    flex: 1,
  }}
  presentationStyle="pageSheet"
  visible={bottomSheetOpen}>
  <View
    style={{
      backgroundColor: 'green',
      borderRadius: 16,
      position: 'absolute',
      bottom: 0,
      left: 0,
      right: 0,
    }}>
    <DatepickerBottomSheet />
  </View>
</Modal>

解决方案 #

问题出在presentationStyle="pageSheet"属性上，它是iOS系统特有的配置，默认会触发背景视图的缩放、变暗效果。要禁用这个变换，只需调整以下两点：

• 移除presentationStyle="pageSheet"：去掉该属性后，系统不会再对背景应用默认的变换效果。
• 自定义Modal内部布局：结合transparent={true}，在Modal内部添加全屏遮罩层（可选半透明），将BottomSheet固定在底部，既保留透明背景特性，又能实现预期的BottomSheet样式。

修改后的代码如下：

<Modal
  animationType="slide"
  onRequestClose={() => openBottomSheet(false)}
  transparent
  visible={bottomSheetOpen}>
  {/* 全屏遮罩（可选，点击可关闭Modal） */}
  <View 
    style={{
      flex: 1,
      backgroundColor: 'rgba(0, 0, 0, 0.5)',
      justifyContent: 'flex-end'
    }}
    onPress={() => openBottomSheet(false)}
  >
    {/* BottomSheet容器 */}
    <View
      style={{
        backgroundColor: 'green',
        borderRadius: 16,
      }}>
      <DatepickerBottomSheet />
    </View>
  </View>
</Modal>

修改后背景视图会保持原样，不会出现缩放，同时BottomSheet会从底部滑入，符合预期样式。

内容的提问来源于stack exchange，提问作者Antoni