logo标签列表

ReactNative的ScrollView无法滚动到底部。

react-nativescrollview
24

如果我尝试滚动到ScrollView的底部，它会反弹回其默认位置，不允许我查看其全部内容。

我的（截断的）设置相当简单：

  <View>
    <View>
      <ABunchOfStuff />
    </View>   
    <View style={styles.sectionNode} >
      <ABunchOfStuff />
    </View>   
    <ScrollView>    <------ My broken ScrollView :(
      <View>
        <ABunchOfStuff />
      </View>
    </ScrollView>   
  </View>

这是我实际代码的简化版本。但我得出结论，存在一些类似于这个引用中所述的"无限高度"问题。

我确保每个元素和其父元素都从<ScrollView>的子元素<View>一直到顶层都设置了flex: 1。但这似乎并没有解决问题。

有什么方法可以调试此问题吗？我知道ReactNative的网站建议这样做，并说在检查器中很容易实现（但没有说明如何实现）。如果我假设存在"无限高度"问题，有什么方法可以找到这个无限高度的元素吗？还是说可能是其他原因导致的？

12个回答
44

尝试完全将 ScrollView 中的 flex 去掉，并在父元素上只添加 flex: 1。这对我很管用。

3
你是一个救星。这对我也有用，但我必须将 ScrollView 的所有父级组件都添加 flex:1 才行。 - Vishal Goel
2
工作正常。此外，如果您想添加填充，请添加一个直接子View并将填充添加到其中。 - John Harding
19

对我来说，问题在于设置了 ScrollView 的 paddingVertical，paddingTop 或 paddingBottom。千万不要这样做。它会影响 ScrollView 内容的高度，但 ScrollView 不会适当地进行调整。

2
为子View添加填充。 - John Harding
11
父视图必须具有style={{flex: 1}}，然后scrollview可以具有style={{flex: 1}}。
6

有限高度的物件意味着 ScrollView 本身必须被限制高度。 如果 ScrollView 的高度没有被限制，它会随内容而拉伸，并且无法滚动。

你可以给 ScrollView 添加一个 height 属性来控制它的高度，并看看效果如何。从那里开始，你可以使用绝对高度或使用 flex 的方式来将 ScrollView 的高度限制在你想要的范围内。

哦，即使我明确地将ScrollView的高度设置得很高，它仍然会反弹回来。 - Trip
“Bounces back”在编程中是什么意思？它是否随机地从中间返回到起点？发生了什么以及何时发生？ - Moti Azu
添加：height: "90%" 解决了我的问题，百分比将根据您的容器而变化。 - Jake
3
这对我有用：
<View style={{flex: 1}}>
   <ScrollView>
      <View style={{paddingTop: 16, paddingBottom: 16}}>
         <SearchBar />
         <ItemsContainer />
      </View>
   </ScrollView>
</View>
还要检查一下子元素（SearchBar和ItemsContainer）是否有任何限制高度的问题。我已经把这些限制移除了。 - jas-chu
2

您必须确保ScrollView有固定的高度，可以通过为其父级或自身设置高度来实现。

我使用flex来设置其高度，而不是直接指定它，这样可以适用于所有屏幕尺寸。因此，对于您的代码，可以像这样：

<View style={{flex: 1}}>
    <View>
      <ABunchOfStuff />
    </View>   
    <View style={styles.sectionNode} >
      <ABunchOfStuff />
    </View>   
    <ScrollView style={{flex:0.8}}>
      <View>
        <ABunchOfStuff />
      </View>
    </ScrollView>   
</View>

在React Native中可以查看更多信息，请参考文档

我已经为每个节点设置了弹性，并且还链接了你在我的问题中提到的相同链接。 - Trip
你能否更新问题，包括每个视图的样式元素？我曾经遇到过类似的问题，然后重新检查了我的代码。我将ScrollView包装在一个View中，并使用flex而不是在ScrollView中设置它自己的属性。你能检查一下更新后的答案吗？ - coder hacker
2
上面建议的使用父级 flex: 1 和子级 flex: 1 的答案是可行的，但这个东西导致了我的 bug。 我有一个带百分比高度的 <Image>，一旦我用数字替换了百分比，问题就解决了。
谢谢，我将我的图像及其容器的视图高度设置为百分比，我将其更改为数字，问题得到解决。 - undefined
2
这对我有效。
    <ScrollView>
       <View style={{height:2000}}>

       </View>
    <ScrollView>

重要的是为ScrollView中的元素设置定义好的高度。
0
我的做法是将ScrollView包装在View中，然后给View设置一个高度并在ScrollView上设置flex:1。
类似这样：
 <View style={{ height: "60%" }}>
     <ScrollView style={{ flex: 1 }}>
       <List/>
     </ScrollView>
 </View>
0
<ScrollView  style={{flex: 1, marginBottom: 30}} /> 
    items
</ScrollView>
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接