Question

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

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

谢谢！

Answer 1

问题：您的导航栏正在推动您的ScrollView。

解决方案：让包装器填满整个屏幕。第8行的这一变化具有神奇的作用：<View style={StyleSheet.absoluteFill}>

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

Answer 2

flex:1到外部父对象

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

如果ScrollView截止，请分配父级<View> flex:1

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

Answer 3

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

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

Answer 4

在滚动视图的样式中添加marginBottom为我解决了此问题。我们需要提高值 marginBottom ，直到我们滚动查看全部内容为止。

<ScrollView style={{ marginBottom: 60}}> //scrollview content </ScrollView>

Answer 5

对于我来说，问题不是flex: 1或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 6

在我的var test = JSON.parse(response); for(var x in test['entries']){ $('#status').html("<br><h4>processing</h4>"); $.ajax({ url: 'index.php?action=sync&net='+test['entries'][x]['name'], success: function (response) { count++; $('#test').append('<b>'+count+'.</b> '+response+'<br>'); if(count==test['size']){ $('#status').removeClass('loading'); $('#status').removeClass('alert alert-warning'); $('#status').addClass('alert alert-success'); $('#status').html('<h5>Sucess</h5>'+teste['size']+' entries synced'); } } }) }元素中，我有一个值View

取消此操作对我来说很有效。

Answer 7

在我的情况下，问题是我的主要内容设置为position: absolute，所以没有计算出正确的高度。

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

7 个答案: