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

Question

我有一个使用 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"
  }
 });

这是输出：

原文由 Manjane 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

Modify your render() method and wrap the ScrollView inside a View container, and set the paddingTop to that View 容器：

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

原文由 ufxmeng 发布，翻译遵循 CC BY-SA 3.0 许可协议

Answer 2

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

原文由 Sandupa Dalugoda 发布，翻译遵循 CC BY-SA 4.0 许可协议