在iOS中,React Native ScrollView从底部被切断

Question

我刚刚开始使用React Native,我遇到了一个我不知道为什么会发生的问题.出于某种原因,我无法滚动到我的底部<ScrollView>.

这是我的代码:https://repl.it/Iqcx/0

谢谢!

Answer 1

在我的情况下，问题不是flex: 1or flexGrow: 1，而是padding在ScrollView样式上使用。

所以不要这样做：

<ScrollView style={{padding: 40}}>
  {/* MY CONTENT HERE */}
</ScrollView>

我这样做了：

<ScrollView>
  <View style={{padding: 40}}>
    {/* MY CONTENT HERE */}
  </View>
</ScrollView>

问题得到了解决。

因此，如果您想向您的 中添加填充，请在其中ScrollView创建一个View并对其应用填充。

Answer 2

flex:1 到外部父级

<View> //Parent
 <Header/>
 <ScrollView/>
</View>

如果ScrollView正在切断，则分配父级<View> flex:1

<View style={{flex:1}}> //Parent
 <Header/>
 <ScrollView/>
</View>

Answer 3

问题:您的导航栏正在推动您的ScrollView.

解决方案:使包装器填满整个屏幕.第8行的这种变化带来了魔力:<View style={StyleSheet.absoluteFill}>

我还最低限度地更改了代码,使其对没有图像的人有用,并且更好地了解发生了什么我以不同的方式命名值.这是工作版本:https://repl.it/Iqcx/2

Answer 4

添加flexGrow:1到<ScrollView>组件contentContainerStyle道具对我有用（添加flex:1到外部<View>或添加到<ScrollView>对我来说不起作用）。

<View>
  <ScrollView contentContainerStyle={{flexGrow:1}}>
    (...content here...)
  </ScrollView>
</View>