React Native Scrollview 与 flexGrow 不滚动答案

【问题标题】：React Native Scrollview with flexGrow doesn't scrollReact Native Scrollview 与 flexGrow 不滚动
【发布时间】：2019-07-18 16:09:27
【问题描述】：

我在我的 react native 项目中使用滚动视图。但它不可滚动，即我看不到顶部元素。当我滚动到底部时，视图会弹回来。我的要求实际上是这样的

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
}
});

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

【问题讨论】：

问题可能出在height: 100。当它有flex: 1（默认为flexDirection: 'column'）时，为什么要使用它？
可以在snack.expo.io 中添加您的可重现问题吗？这将很容易调试。
@SubhenduKundu 请检查这个...snack.expo.io/H1BQaVWL4
@Milore without height: 100 它不工作。
我看看你的零食

标签： react-native flexbox react-native-scrollview

【解决方案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 });
    }}
  > ...

我创建了一个snack，它试图重现您的问题。想看就看吧！

【讨论】：