在 React Native 中无法滚动到 ScrollView 的底部

Question

我有一个使用ScrollView 的非常简单的示例，但我似乎无法滚动到底部。

这个例子是完全基本的，我没有做任何特别的事情，但最后一项永远不会完全可见。

Expo Code

 import React, { Component } from "react";
 import { Text, View, ScrollView, StyleSheet } from "react-native";
 import { Constants } from "expo";

 const data = Array.from({ length: 20 }).map((_, i) => i + 1);

 export default class App extends Component {
  render() {
    return (
        <ScrollView style={styles.container}>
            {data.map(d => (
                <View style={styles.view}>
                    <Text style={styles.text}>{d}</Text>
                </View>
            ))}
        </ScrollView>
      );
    }
  }

const styles = StyleSheet.create({
  container: {
     paddingTop: Constants.statusBarHeight
  },
  text: {
    fontWeight: "bold",
    color: "#fff",
    textAlign: "center",
    fontSize: 28
},
view: {
    padding: 10,
    backgroundColor: "#018bbc"
  }
 });

这是输出：

Answer 1

将填充样式应用于“contentContainerStyle”属性，而不是 ScrollView 的“样式”属性。

Answer 2

我通过将 Scrollview 的 contentInset 底部属性设置为一个足以让我看到我的内容的最底部部分（在我的例子中是一个按钮）的值来解决问题。

例子：

<ScrollView
  contentInset={{bottom: 80}}>
  {{ content }}
</ScrollView>

Answer 3

将flexGrow: 1 的contentContainerStyle 设置为ScrollView

contentContainerStyle={{ flexGrow: 1 }}

Answer 4

我的应用程序中只有一个ScrollView，它运行良好。然后我在顶部添加了一个标题组件，我的ScrollView 的底部不再可见。我尝试了一切，但没有任何效果。直到我在尝试所有疯狂的事情一小时后找到了解决方案，这就是它。我通过将paddingBottom 作为contentContainerStyle 添加到我的ScrollView 来解决此问题。

<ScrollView contentContainerStyle={{paddingBottom: 60}} >
    {this.renderItems()}
</ScrollView>

Answer 5

为 ScrollView 添加高度样式。

height:'100%', width:'100%'

Answer 6

我遇到了这个问题并修复了它。要解决它： flex:1 表示“将其扩展到其父级大小”，如果父级的高度为 0，它将不起作用 flex:-1 表示“将其缩小以适合其子级大小”，如果子级高度设置为 flex:1（取决于父级）-> 它不起作用-> 你问我？我问你回来。环形。 滚动视图中有两个视图 -> 一个 {flex:1} 外部视图包裹了一个 {flex:-1} 内部视图。当内部视图高于外部视图时，即发生滚动。 这也意味着外部视图高度取决于滚动视图父级，内部视图取决于子级。如果您不能为其外部视图指定高度，则外部视图将变为 0 高度。您不能使用高度为 0 的外部视图滚动内部视图，一旦您的手指松开，它将始终弹回原点位置。 用<View style={{flex:1}}> 包装它可能会或可能不会解决您的问题，因为这意味着滚动视图的父级会自行扩展以适应其父级，然后高度取决于它的父级。 （您的滚动视图的祖父）。所以如果你的祖父母没有定义身高，它就会失败。

下面的例子不起作用

<View style={{height:300,width:200}}>
<View> //<-this break
<View {{flex:1}}>
<ScrollView>{contents}</ScrollView>
</View>
</View>
</View>

这项工作：

 var {Windowheight, width} = Dimensions.get('window');
<View style={{height:Windowheight}}>
<View style={{flex:1}}>
<ScrollView>{contents}</ScrollView>
<View>
</View>

这也有效：

 var {windowHeight, windowWidth} = Dimensions.get('window');
<View style={{height:windowHeight}}>
<Toolbar or other component with fixed height>
<ScrollView style={{flex:1}}>{contents}</ScrollView>
<Footer or other component with fixed height>
</View>

结论，请确保您的滚动视图高度可以从外部和内部确定。如果发生奇怪的事情，追踪祖先直到你找到一个高度，或者只是在它的可追踪祖先中定义一个实体而不依赖 flex:1 一些第三方组件用 <View> 包装东西，这会破坏东西。

Answer 7

修改您的render() 方法并将ScrollView 包装在View 容器中，并将paddingTop 设置为该View 容器：

render() {
    return (
        <View style={ styles.container}>
            <ScrollView >
                {data.map(d => <View style={styles.view}><Text style={styles.text}>{d}</Text></View>)}
            </ScrollView>
        </View>
    );
}