React Native ScrollView 在 iOS 从底部被截断

Question

我刚刚遇到一个奇怪的问题，我不知道为什么会这样。 出于某种原因，我无法滚动到<ScrollView>的底部。

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

谢谢！

Answer 1

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

所以不要这样做：

<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向下推。

解决方案：让ScrollView周围的包装器填满整个屏幕。 第 8 行中的这一变化具有魔力： <View style={StyleSheet.absoluteFill}>

我还对您的代码进行了最低限度的更改，以使其对没有您的形象的人有用，并更好地了解正在发生的事情，我以不同的方式命名了这些值。 这是工作版本： https ://repl.it/Iqcx/2

简化代码：

import { View, ScrollView, StyleSheet } from "react-native";

<View style={StyleSheet.absoluteFill}>
  <ScrollView />
</View>

Answer 4

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

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

Answer 5

在我对被切断元素的View中，我的值height = 100%

删除它为我完成了这项工作。

Answer 6

将 marginBottom 添加到scrollview的样式为我解决了这个问题。 我们需要增加marginBottom值，直到我们可以滚动查看全部内容。

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

Answer 7

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

Answer 8

只需使用contentContainerStyle

Answer 9

我的ScrollView中的每个项目的aspectRatio设置为 1。当我删除它时，我能够滚动到ScrollView的底部。

Answer 10

在我的ScrollView组件中，我可以滚动到底部并查看所有内容，但滚动时底部总是有一个覆盖。 我通过将ScrollView包装在View组件中解决了这个问题，我没有再看到覆盖。 希望这对某人有所帮助。