带有 flexGrow 的 React Native Scrollview 不会滚动

Question

我在我的反应原生项目中使用滚动视图。但它不可滚动，即，我看不到顶部元素.当我滚动到底部时，视图会反弹回来。我的要求其实是这样的

1)底部项目应该是可见的----->现在工作正常

2)滚动顶部项目应该可见时，不应反弹视图-----> 现在这就是问题所在

这是我的代码

return (
<ScrollView contentContainerStyle={{ flexGrow: 1 }}>
<View style={styles.main}>
<View style={styles.container}>
........(Some code)
</View>
</View>
</ScrollView>
);
const styles = StyleSheet.create({
container: {
flex: 1,
backgroundColor: "#fff",
alignItems: "center",
justifyContent: "flex-end",
padding: 6,
paddingTop: 250
},
main: {
flex: 1,
height: 100
}
});

知道我错过了什么吗？任何帮助将不胜感激！

Answer 1

正如我在评论中所写，问题可能是height: 100与flex: 1一起使用(实际上flexDirection默认column，因此您尝试以两种不同的方式设置高度)。既然似乎没有理由拥有它，只需删除它。为了使您的ScrollView在底部滚动，我建议您执行以下操作：

<ScrollView
contentContainerStyle={{ flexGrow: 1 }}
ref={ref => (this.scrollView = ref)}
onContentSizeChange={(contentWidth, contentHeight) => {
this.scrollView.scrollToEnd({ animated: true });
}}
> ...

我创建了一个零食，试图重现您的问题。如果你愿意，可以看看！