无法在 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"
  }
 });

这是输出：

Answer 1

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

Answer 2

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

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

Answer 3

将flexGrow: 1设置为ScrollView的contentContainerStyle

contentContainerStyle={{ flexGrow: 1 }}

Answer 4

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

Answer 5

我有这个问题并解决了它。 解决它： flex:1 表示“将其扩展到其父级大小”，如果父级的高度为 0，它将不起作用 flex:-1 表示“将其缩小以适合其子级大小”，如果子级高度设置为 flex :1（取决于父母）-> 它不会工作-> 你问我？ 我请你回来。 环形。 scrollview 有两个视图 -> 一个{flex:1}外部视图包裹了一个{flex:-1}内部视图。 当内部视图比外部视图高时，就是滚动发生的时候。 这也意味着外部视图高度取决于滚动视图父级，内部视图取决于子级。 如果你不能给它的outer view一个高度，outer view就会变成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 6

为 ScrollView 添加了高度样式。

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

Answer 7

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

例子：

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

Answer 8

在不使用 % 的情况下设置子组件高度，例如 make minHeight: '10%' -> minHeight: 10