reactjs 可重新调整大小,防止平面列表滚动

cgfeq70w  于 2023-04-20  发布在  React
关注(0)|答案(2)|浏览(123)

re-resizable包中的Resizable阻止了我的Flatlist滚动。当列表中有足够多的元素需要滚动时,它不会开始滚动。当不存在可调整大小的元素时,不会发生此行为。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,
  },
e4yzc0pl

e4yzc0pl1#

我发现了这个问题。当设置为hidden时,overflow将阻止滚动。这在CSS文档中有记录。解决这个问题的方法是将overflow设置为autohidden visiblevisible hidden取决于情况。原因是因为overflowoverflow-xoverflow-y的简写。值中的第一个字用于x,第二个字用于y

mainViewExpanded: {
    overflow: 'hidden visible',
},
n7taea2i

n7taea2i2#

处理滚动的最好方法是添加
Y溢流

溢出-x
。。取决于你的数据
汽车

相关问题