Question

在我的应用程序index.io.js中，只有1 ScrollView被包含在View函数下的render内。有时我可以滚动到ScrollView的最底部并将屏幕保持在那里。然而，ScrollView会弹回到屏幕顶部并且有时无法保持在底部。

有谁知道发生了什么？谢谢。

render() {
  return <View style={{flex: 1}}>
  <ScrollView>
    <Text>234</Text>
    <Text>234</Text>
    <Text>234</Text>
    <Text>234</Text>
    // .... repeat so many times ...
  </ScrollView>
  </View>
}

p.s：我的RN是0.28.0，iOS部署目标是8.0

Answer 1

对于像我这样的React本地新手：

了解在scrollview的<!DOCTYPE html>  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap3-dialog/1.34.7/css/bootstrap-dialog.min.css"> <link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous">  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap3-dialog/1.34.7/js/bootstrap-dialog.min.js"></script> <div class="container">  <button type="button" class="btn btn-info btn-lg" data-toggle="modal" data-target="#myModal">instruction</button> </div>  <div class="modal fade" id="myModal" role="dialog"> <div class="modal-dialog">  <div class="modal-content"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal">×</button> <h4 class="modal-title">Modal Header</h4> </div> <div class="modal-body"> <p>Some text in the modal.</p> </div> <div class="modal-footer"> <button type="button" class="btn btn-default" data-dismiss="modal">Close</button> </div> </div> </div> </div>属性上设置{flex:1}的错误，这基本上是告诉滚动视图明确不滚动并期望滚动，因为这将内容高度设置为相同的父框架，即滚动视图

Answer 2

请记住，ScrollViews必须具有有限的高度才能工作，因为它们包含无限高度的子项到有界容器中（通过滚动交互）。为了限制ScrollView的高度，可以直接设置视图的高度（不鼓励），也可以确保所有父视图都具有有界高度。忘记在视图堆栈中向下传送{flex: 1}可能会导致错误，元素检查器可以轻松调试。

https://facebook.github.io/react-native/docs/scrollview.html

我认为你应该使用flex：1属性为scrollView指定一个样式。并创建一个contentContainerStyle以获得更好的设计。

Answer 3

要准确回答该问题，ScrollView还应该具有style = {{flex：1}}属性。 ScrollView需要设置高度才能滚动。

但是，在我的情况下，我在滚动视图上进行了填充，这一定会使系统中的某些计算变得毫无意义。我正在使用本机0.55。

要解决此问题，我需要更改：

<ScrollView style={{flex: 1, padding: 10}}>
   //Content goes here
</ScrollView>

到

<View style={{padding: 10, flex: 1}}>
   <ScrollView style={{flex: 1}}>
      //Content goes here
   </ScrollView>
</View>

Answer 4

这发生在我使用 position: "absolute" 时。我的解决方案是使用父视图 {position: "relative"}。解决了我的问题。

Answer 5

<ScrollView style={{flex: 1}}>
  <View style={styles.bottom}>
    {
       list.size > 0 && list.map((_, index) => {
        return (
          <View style={styles.listItem} key={index}>
            <Text style={styles.count}>{index + 1}</Text>
          </View>
        )
      })
    }
  </View>
</ScrollView>

使用flex：1

Answer 6

在inact native中使用时，使用flexGrow代替flex 。如果您想进一步了解原因，请查看以下文章：

https://medium.com/@peterpme/taming-react-natives-scrollview-with-flex-144e6ff76c08

Answer 7

溶液反应0.57进行了测试

IDK是否已解决问题，但此解决方案对我有用

<ScrollView>
    <View style={{ padding: 10 }}>
        // User contents here
    </View>
</ScrollView>

无需弯曲任何东西。代码的这种安宁将在所有四个方面生成一个带有装订线的视图。而且很酷的事情是最后一个元素没有被裁剪。

我很懒于添加路由器，所以我添加了一个appbar组件，在顶部为主要内容添加了一些边距。 appbar组件可以安全地忽略。

Check the live demo here

Answer 8

在scrollView底部添加一个额外的无用视图：

<View style={{height:valueHere}} />

解决了地雷问题。

Answer 9

contentContainerStyle={{ paddingBottom: 60 }}

因此应用具有特定大小的paddingBottom应该可以为您解决

Answer 10

<View style={{height:'100%',width:'100%',backgroundColor:'#fff'}}>
     <ScrollView>
           //// content here 
     </ScrollView>
</View>

这对我有用

Answer 11

在 ScrollView 底部放置一个无用的 View 确实解决了我的问题。谁会知道哈哈。

<ScrollView>
....
   <View style={{height:100}}></View>
<ScrollView>

React Native ScrollView有时不会滚动到底部

11 个答案: