ReactNative ScrollView 不会滚动到底部

Question

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

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

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

这是我的实际代码的简化版本。但我得出的结论是，存在某种“无限高度”，如本参考文献中。

我确实尝试确保所有事情和所有父母都有

flex: 1

一直到我的

<View>

的孩子

<ScrollView>

及其父母。但这似乎并没有起到作用。

知道如何调试这个吗？我知道 ReactNative 的网站推荐了这一点，并说在检查器中很容易做到（但没有关于如何做的说明）。如果我假设存在“无界高度”问题，那么如何找到这个无赖的无界节点呢？还是别的什么？

Answer 1

尝试完全从

ScrollView

中取出 Flex，然后将

flex: 1

放在父级上。这对我来说很有效。

Answer 2

对我来说，问题是在 ScrollView 上设置

paddingVertical

、

paddingTop

或

paddingBottom

。只是不要那样做。它会影响 ScrollView 内容的高度，而 ScrollView 不会对其进行适当调整。

Answer 3

父视图必须有 style={{flex: 1}} 那么滚动视图可以有 style={{flex: 1}} 🥇

Answer 4

有界高度意味着

ScrollView

本身必须受到限制。 如果 ScrollView 的高度无限制，它将随着您的内容拉伸并且不会滚动。

您只需将

height

添加到

ScrollView

并查看其工作原理，从那里开始您可以使用绝对高度或以将

ScrollView

高度限制为您想要的高度的方式使用 Flex。

Answer 5

这对我有用：

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

Answer 6

您必须确保

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 docs

Answer 7

这对我有用

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

       </View>
    <ScrollView>

重要的是为 ScrollView 内的元素设置一个定义的高度

Answer 8

上面建议的父 Flex: 1 和子 Flex: 1 答案可以工作，但这件事导致了我的错误。 我有

<Image> with percentage height

，一旦我用数字替换了百分比，问题就解决了。

Answer 9

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

Answer 10

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

类似这样的：

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

Answer 11

我将容器设置为绝对位置，这导致了问题。

Answer 12

添加

<Text></Text>

在滚动视图的底部。它会留出一些空间

Answer 13

这将解决你的问题

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