如何让@gorhom/bottom-sheet非全屏宽度且居中显示？

直接通过组件提供的containerStyle属性就能实现需求，这是控制BottomSheet外层容器样式的正确方式，具体代码如下：

<BottomSheet
  snapPoints={snapPoints}
  containerStyle={{
    width: '80%',
    alignSelf: 'center'
  }}
>
  {/* 你的弹窗内容 */}
</BottomSheet>

为什么之前的方法没效果？ #

• 你之前给BottomSheet设置的style属性，实际只作用于组件内部的内容区域，外层的底层容器还是全屏宽度，所以视觉上没变化。
• 外层View加justifyContent: 'center'无效，是因为BottomSheet的容器默认脱离了常规Flex布局流（比如采用绝对定位），常规布局属性对它不起作用。

如果需要自定义弹窗的背景样式（比如圆角、阴影），可以搭配backgroundComponent属性进一步定制：

import { View } from 'react-native';

<BottomSheet
  snapPoints={snapPoints}
  containerStyle={{
    width: '80%',
    alignSelf: 'center'
  }}
  backgroundComponent={() => (
    <View style={{
      flex: 1,
      borderRadius: 16,
      backgroundColor: '#fff',
      shadowColor: '#000',
      shadowOffset: { width: 0, height: 2 },
      shadowOpacity: 0.25,
      shadowRadius: 4,
      elevation: 5
    }} />
  )}
>
  {/* 你的弹窗内容 */}
</BottomSheet>

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