3

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

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

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

4

1 回答 1

3

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

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

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

于 2019-02-25T10:09:11.780 回答