React Native ScrollView is not scrolling to the bottom sometimes

问题

inside my application index.io.js there is only 1 ScrollView that is wrapped inside a View under the render function. Sometimes I can scroll to the very bottom of the ScrollView and keep the screen there. However the ScrollView would bounce back to the top of the screen and fail to stay at the bottom sometimes.

Does anyone know what is happening? Thanks.

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: my RN is 0.28.0, iOS deployment target is 8.0

回答1:

For React native newbies like me:

lookout for making the error of setting {flex:1} on the scrollview's contentContainerStyle attribute, which is basically telling the scrollview explicitly not to scroll and expecting it to scroll, since this sets the content height to the same parent's frame which is the scrollview

回答2:

To answer the question exactly, the ScrollView should also have a style={{flex: 1}} prop. A ScrollView needs a set height to scroll.

However in my case, I had padding on my scroll view, and that must have thrown out some calculation deep in the system. I am using react native 0.55.

To resolve I needed to change:

<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>

回答3:

Keep in mind that ScrollViews must have a bounded height in order to work, since they contain unbounded-height children into a bounded container (via a scroll interaction). In order to bound the height of a ScrollView, either set the height of the view directly (discouraged) or make sure all parent views have bounded height. Forgetting to transfer {flex: 1} down the view stack can lead to errors here, which the element inspector makes easy to debug.

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

I think you should assign a style to your scrollView with flex:1 property. And create a contentContainerStyle to have a better design.

回答4:

Adding an extra useless view on the bottom of scrollView :

<ScrollView>
//your contents here

  <View style={{height:100(or any suitable value)}} />
</ScrollView>

solved mine issue.

回答5:

When you're using in react native, use flexGrow instead of flex. If you want a more in depth guide as of why, check out the article below:

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

回答6:

<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>

use flex: 1

回答7:

Solution tested on react 0.57

IDK whether you fixed the issue but this solution worked for me

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

No need to flex anything. This peace of code will generate a view with gutter on all the 4 sides. And the cool thing is that the last element is not getting clipped.

I am very lazy to add a router so I added a appbar component to add some margin at the top for the main content. The appbar component can be ignored safely.

Check the live demo here

回答8:

contentContainerStyle={{ paddingBottom: 60 }}

so applying paddingBottom with a specific size should solve it for you

回答9:

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

This works for me

来源：https://stackoverflow.com/questions/38942869/react-native-scrollview-is-not-scrolling-to-the-bottom-sometimes

标签

uiscrollview

react-native