@gorhom/bottom-sheet组件异常：关闭图标不显示且无法拖拽

针对你使用@gorhom/bottom-sheet时遇到的关闭图标不显示问题，结合代码排查方向如下：

1. SVG文件本身或路径问题 #

• 验证bottom_sheet_close_icon.svg是否存在于../../../assets/img/icons/路径下，React Native对文件路径大小写敏感，需确保文件名完全匹配
• 直接用浏览器打开该SVG文件，确认文件未损坏、能正常渲染
• 检查SVG内容是否包含React Native不支持的语法（如特殊滤镜、脚本标签）

2. SVG组件导入与属性传递问题 #

• 确认CloseIcon的导出方式：如果SVG是通过react-native-svg-transformer转换的组件，需确保是默认导出，导入时未使用命名导入语法
• 检查属性传递：你给CloseIcon设置了width和height，部分SVG组件库可能需要用size属性，或需确保属性正确映射到底层<Svg>标签。可尝试替换为：

  <CloseIcon size={14.65} />
  

3. 布局与样式冲突 #

• 检查closeIcon容器布局：当前样式flex:1, alignItems:'flex-end'，需确认父容器bottomSheet有足够宽度容纳图标。可临时给closeIcon添加背景色（如backgroundColor: 'rgba(255,0,0,0.5)'），查看容器实际位置和尺寸，确认图标是否在可视区域内
• 排查颜色冲突：如果SVG默认填充色和bottomSheet背景色（白色）一致，会导致图标“隐身”。可显式设置颜色：

  <CloseIcon width={14.65} height={14.65} fill="#4D4D4D" />
  

4. 依赖库兼容性问题 #

• 确保已正确安装并配置react-native-svg（RN 0.60+版本执行npm install react-native-svg即可，无需手动链接）
• 检查@gorhom/bottom-sheet和react-native-svg的版本兼容性，可尝试更新两个库到最新稳定版

额外补充：底部弹窗无法拖拽的可能原因 #

同步排查拖拽失效问题：

• 确认BottomSheet的父容器container已设置flex:1（你的代码已满足）
• 检查内部FlatList是否拦截了触摸事件，可添加nestedScrollEnabled={true}属性
• 确保@gorhom/bottom-sheet的依赖（如react-native-gesture-handler）已正确安装，且在App.js顶部导入import 'react-native-gesture-handler';

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