ReactNative ScrollView 不会滚动到底部

Question

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

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

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

这是我实际代码的简化版本。但我得出的结论是 "unbounded height" 正在进行 as in this reference。

我确实尝试确保所有 parents 都有 flex: 1 一直到我的 <ScrollView> 的 child <View> 直到它parents。但这似乎并没有起到作用。

知道如何调试吗？我知道 ReactNative 的网站推荐这个，并说在检查器中很容易做到（但没有关于如何做的说明）。如果我假设存在 "unbounded height" 问题，那么如何找到这个流氓无界节点？还是其他原因？

Answer 1

有界高度意味着 ScrollView 本身必须被绑定。如果 ScrollView 的高度没有限制，它会随着你的内容伸展而不会滚动。

您可以将 height 添加到 ScrollView 并查看其工作原理，然后您可以使用绝对高度或以限制 ScrollView 的方式使用 flex高度到你想要的。

Answer 2

您必须确保 ScrollView 具有固定高度，可以通过为 parents 或自身设置它来实现。

我使用 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 中的更多信息docs

Answer 3

尝试完全从 ScrollView 中取出 flex，然后将 flex: 1 放在父级上。这对我有用。

Answer 4

对我来说，问题是在 ScrollView 上设置 paddingVertical、paddingTop 或 paddingBottom。只是不要那样做。它会影响 ScrollView 内容的高度，而 ScrollView 不会对其进行适当调整。

Answer 5

<ScrollView  style={{flex: 1, marginBottom: 30}} /> 
    items
</ScrollView>

Answer 6

这对我有用

    <ScrollView>
       <View style={{height:2000}}>

       </View>
    <ScrollView>

重要的是为 ScrollView 内的元素定义高度

Answer 7

父视图必须有 style={{flex: 1}} 然后 scrollview 可以有 style={{flex: 1}}

Answer 8

这对我有用：

<View style={{flex: 1}}>
   <ScrollView>
      <View style={{paddingTop: 16, paddingBottom: 16}}>
         <SearchBar />
         <ItemsContainer />
      </View>
   </ScrollView>
</View>

Answer 9

添加<Text></Text> 在滚动视图的底部。它会给一些 space

Answer 10

对我有用的是将 ScrollView 包装在 View 中。然后给视图一个高度并在 ScrollView 上设置 flex : 1。

像这样：

 <View style={{ height: "60%" }}>
     <ScrollView style={{ flex: 1 }}>
       <List/>
     </ScrollView>
 </View>

Answer 11

上面关于 parent flex: 1 和 child flex: 1 的建议答案有效，但这件事导致了我的错误。我有 <Image> with percentage height，一旦我 将百分比替换为数字 ，它就解决了问题。

Answer 12

这将解决您的问题

    <ScrollView
     contentContainerStyle={{flexGrow:1,justifyContent:'space- 
      between'}}
      >
       <The Other Components or Lists/>
     </ScrollView>

ReactNative ScrollView 不会滚动到底部

ReactNative ScrollView will not scroll to the bottom

scrollview

react-native