使用 flexGrow 的 React Native Scrollview 不滚动

Question

我在我的 React Native 项目中使用了滚动视图。但它不可滚动，即，我看不到顶部元素。当我滚动到底部时，视图弹跳 back.My 要求实际上是这样的

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

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

使用 flexGrow 的 React Native Scrollview 不滚动

React Native Scrollview with flexGrow doesn't scroll

react-native

flexbox

react-native-scrollview