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

Question

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

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

博览会代码

 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

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

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

Answer 2

将填充样式应用于“ contentContainerStyle”道具，而不是ScrollView的“ style”道具。

Answer 3

设置flexGrow: 1为contentContainerStyle您的ScrollView

contentContainerStyle={{ flexGrow: 1 }}

Answer 4

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

例子：

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

Answer 5

修改您的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>
    );
}