如果我尝试滚动到 ScrollView 的底部,它会弹回到默认位置,并且不会让我查看其全部内容。
我的(截断的)设置相当简单:
<View>
<View>
<ABunchOfStuff />
</View>
<View style={styles.sectionNode} >
<ABunchOfStuff />
</View>
<ScrollView> <------ My broken ScrollView :(
<View>
<ABunchOfStuff />
</View>
</ScrollView>
</View>
这是我的实际代码的简化版本。但我得出的结论是,存在某种“无限高度”,如本参考文献中。
我确实尝试确保所有事情和所有父母都有
flex: 1
一直到我的<View>
的孩子<ScrollView>
及其父母。但这似乎并没有起到作用。
知道如何调试这个吗?我知道 ReactNative 的网站推荐了这一点,并说在检查器中很容易做到(但没有关于如何做的说明)。如果我假设存在“无界高度”问题,那么如何找到这个无赖的无界节点呢?还是别的什么?
尝试完全从
ScrollView
中取出 Flex,然后将 flex: 1
放在父级上。这对我来说很有效。
对我来说,问题是在 ScrollView 上设置
paddingVertical
、paddingTop
或 paddingBottom
。只是不要那样做。它会影响 ScrollView 内容的高度,而 ScrollView 不会对其进行适当调整。
父视图必须有 style={{flex: 1}} 那么滚动视图可以有 style={{flex: 1}} 🥇
有界高度意味着
ScrollView
本身必须受到限制。
如果 ScrollView 的高度无限制,它将随着您的内容拉伸并且不会滚动。
您只需将
height
添加到 ScrollView
并查看其工作原理,从那里开始您可以使用绝对高度或以将 ScrollView
高度限制为您想要的高度的方式使用 Flex。
这对我有用:
<View style={{flex: 1}}>
<ScrollView>
<View style={{paddingTop: 16, paddingBottom: 16}}>
<SearchBar />
<ItemsContainer />
</View>
</ScrollView>
</View>
您必须确保
ScrollView
具有固定的高度,无论是为父母设置还是为自身设置。
我使用 flex 设置其高度,而不是直接指定它,因此它适用于所有屏幕尺寸。所以对于你的代码来说像
<View style={{flex: 1}}>
<View>
<ABunchOfStuff />
</View>
<View style={styles.sectionNode} >
<ABunchOfStuff />
</View>
<ScrollView style={{flex:0.8}}>
<View>
<ABunchOfStuff />
</View>
</ScrollView>
</View>
更多信息请参见 React Native docs
这对我有用
<ScrollView>
<View style={{height:2000}}>
</View>
<ScrollView>
重要的是为 ScrollView 内的元素设置一个定义的高度
上面建议的父 Flex: 1 和子 Flex: 1 答案可以工作,但这件事导致了我的错误。 我有
<Image> with percentage height
,一旦我用数字替换了百分比,问题就解决了。
<ScrollView style={{flex: 1, marginBottom: 30}} />
items
</ScrollView>
对我有用的是将 ScrollView 包装在 View 中。然后给 View 一个高度并在 ScrollView 上设置 flex : 1 。
类似这样的:
<View style={{ height: "60%" }}>
<ScrollView style={{ flex: 1 }}>
<List/>
</ScrollView>
</View>
我将容器设置为绝对位置,这导致了问题。
添加
<Text></Text>
在滚动视图的底部。它会留出一些空间
这将解决你的问题
<ScrollView
contentContainerStyle={{flexGrow:1,justifyContent:'space-
between'}}
>
<The Other Components or Lists/>
</ScrollView>