Question

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

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反应本机Scrollview不滚动

1 个答案: