英文:
Re-resizable preventing flatlist from scrolling
问题
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,
},
英文:
Resizable from the re-resizable package is preventing my Flatlist from scrolling. When the list has enough elements to require scrolling, it doesn't start to scroll. This behavior doesn't happen when the resizable element isn't there. The documentation for Resizable doesn't mention scrolling.
<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>
Styles:
mainViewExpanded: {
overflow: 'hidden',
height: 300,
width: 300,
backgroundColor: theme.BGSECOND,
borderStyle: 'solid',
borderRadius: 10,
borderWidth: 2,
borderColor: theme.FIRST,
},
答案1
得分: 1
我发现了问题。当将overflow设置为hidden时，将阻止滚动。这在CSS文档中有记录。解决这个问题的方法是根据情况将overflow设置为auto、hidden visible或visible hidden。原因是因为overflow是overflow-x和overflow-y的简写。值中的第一个词用于x，第二个词用于y。
mainViewExpanded: {
overflow: 'hidden visible',
},
英文:
I found the issue. overflow when set to hidden will prevent scrolling. This is documented in the CSS documentation. The way to solve this problem is by either setting overflow to auto, hidden visible or visible hidden depending on the situation. The reason is because overflow is a shorthand for overflow-x and overflow-y. The first word in the value is for x, and the second is for y.
mainViewExpanded: {
overflow: 'hidden visible',
},
答案2
得分: 1
处理滚动的最佳方式是添加 overflow-y 或 overflow-x ，根据你的数据设置为 auto。
英文:
The best way to handle scroll is to add
> overflow-y
or
> overflow-x
..depending on your data to
> auto
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论