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

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

ps:我的RN是0.28.0,iOS部署目标是8.0

Answer 1

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

{flex:1}想要在scrollview的contentContainerStyle属性上设置错误,这基本上是告诉滚动视图明确地不滚动并期望它滚动,因为这会将内容高度设置为相同的父框架,即scrollview

Answer 2

contentContainerStyle={{ paddingBottom: 60 }}

所以应用特定尺寸的 paddingBottom 应该会为你解决

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

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

<ScrollView>
//your contents here

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

解决了我的问题。

Answer 5

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

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

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

Answer 6

当您在 React Native 中使用时，请使用 flexGrow 而不是 flex。如果您想要更深入的指南来了解原因，请查看以下文章：

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