re-resizable组件导致FlatList无法滚动的问题求助

当列表元素数量足够多需要滚动时，被Resizable包裹的FlatList完全无法触发滚动；移除Resizable组件后滚动功能恢复正常，且re-resizable官方文档未提及该滚动冲突问题。

相关代码 #

<Resizable
  style={style.mainViewExpanded}
  defaultSize={{
    width: 300,
    height: 300,
  }}
  maxHeight="80vh"
  maxWidth="600"
  minWidth="300"
  minHeight="300"
  enable={{
    top: true,
    right: false,
    bottom: false,
    left: true,
    topRight: false,
    bottomRight: false,
    bottomLeft: false,
    topLeft: true,
  }}
>
   <FlatList
        data={parsedPacks}
        keyExtractor={(item) => item.packName}
        renderItem={({item}) => (
          <PackListItem
            packName={item.packName || pack}
            content={item.content}
          />
        )}
      />
</Resizable>

样式代码 #

mainViewExpanded: {
  overflow: 'hidden',
  height: 300,
  width: 300,
  backgroundColor: theme.BGSECOND,
  borderStyle: 'solid',
  borderRadius: 10,
  borderWidth: 2,
  borderColor: theme.FIRST,
},

解决方法 #

• 给FlatList设置100%高度
  Resizable的overflow: hidden会限制内部滚动区域，但FlatList默认未明确高度，导致滚动事件被Resizable的拖拽逻辑拦截。给FlatList添加style={{height: '100%'}}，让它占满Resizable内部空间，确保滚动区域被正确识别。

• （可选）规避拖拽与滚动的事件冲突
  如果滚动时仍误触发Resizable的拖拽，可以给FlatList绑定onScroll事件，在滚动开始时临时禁用Resizable的拖拽（比如设置enable的对应方向为false），滚动结束后恢复。优先推荐第一种方法，该方案作为补充。

修改后的代码示例 #

<Resizable
  style={style.mainViewExpanded}
  defaultSize={{
    width: 300,
    height: 300,
  }}
  maxHeight="80vh"
  maxWidth="600"
  minWidth="300"
  minHeight="300"
  enable={{
    top: true,
    right: false,
    bottom: false,
    left: true,
    topRight: false,
    bottomRight: false,
    bottomLeft: false,
    topLeft: true,
  }}
>
   <FlatList
        style={{height: '100%'}} {/* 新增高度设置 */}
        data={parsedPacks}
        keyExtractor={(item) => item.packName}
        renderItem={({item}) => (
          <PackListItem
            packName={item.packName || pack}
            content={item.content}
          />
        )}
      />
</Resizable>

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