在@gorhom/bottom-sheet中实现评论区滚动失效问题求助

这是底部sheet与内部滚动组件的手势冲突导致的——默认BottomSheet会拦截所有触摸拖拽事件，滚动评论时会误触发sheet的收起逻辑。可以通过以下两种方式解决：

1. 使用组件库提供的滚动组件 #

@gorhom/bottom-sheet内置了适配好的滚动组件，直接替换你Comments里的ScrollView/FlatList/SectionList即可，它们会自动处理手势优先级：

比如把FlatList换成BottomSheetFlatList：

import { BottomSheetFlatList } from '@gorhom/bottom-sheet';

// 在Comments组件内部
<BottomSheetFlatList
  data={yourCommentsData}
  renderItem={({ item }) => <CommentItem comment={item} />}
  keyExtractor={(item) => item.id.toString()}
  contentContainerStyle={{ paddingBottom: 20 }}
/>

同理，ScrollView对应BottomSheetScrollView，SectionList对应BottomSheetSectionList。

2. 用钩子包装自定义滚动组件 #

如果你的Comments组件用的是自定义滚动容器，或者无法直接替换内置组件，使用useBottomSheetScrollable钩子标记滚动区域：

import { useBottomSheetScrollable } from '@gorhom/bottom-sheet';
import { ScrollView } from 'react-native';

const Comments = () => {
  const scrollableRef = useBottomSheetScrollable();

  return (
    <ScrollView ref={scrollableRef} style={{ flex: 1 }}>
      {/* 你的评论列表内容 */}
    </ScrollView>
  );
};

额外注意事项 #

• 确保外层的contentContainer设置flex:1，让内部滚动组件能占据sheet的可用空间：

const styles = StyleSheet.create({
  contentContainer: {
    flex: 1,
    paddingHorizontal: 16,
  },
});

• 检查snapPoints是否合理，比如设置为['60%', '95%']，确保sheet有足够的展开高度容纳滚动内容。

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