无法在 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

修改您的 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 2

我遇到了这个问题并已解决。解决它： flex:1 表示“将其扩展到其 parent 大小”，如果 parent 的高度为 0，它将不起作用 flex:-1 表示“将其缩小以适合其 children 大小”，如果 child 高度设置为 flex:1（取决于 parent）-> 它不会工作 - > 你问我？我请你回来。环形。 scrollview 有两个视图 -> 一个 {flex:1} 外视图包裹了一个 {flex:-1} 内视图。当内部视图比外部视图高时，就是滚动发生的时候。这也意味着外部视图高度取决于 scrollview parent，内部视图取决于 children。如果你不能给它的outer view一个高度，outer view就会变成0高度。你不能用 0 高度的外部视图滚动内部视图，一旦你的手指松开，它总是会弹回原来的位置。用 <View style={{flex:1}}> 包装它可能会或可能不会解决您的问题，因为这意味着滚动视图的 parent 会扩展自身以适应其 parent，然后高度取决于它 parent。（你的滚动视图的盛大 parent）。所以如果你的大 parent 没有定义高度，它就会失败。

下面的例子不行

<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 3

为 ScrollView 添加了高度样式。

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

Answer 4

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

Answer 5

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

解决了这个问题

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

Answer 6

将您的 ScrollView

的 flexGrow: 1 设置为 contentContainerStyle

contentContainerStyle={{ flexGrow: 1 }}

Answer 7

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

示例：

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

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

Cannot scroll to bottom of ScrollView in React Native

javascript

scrollview

reactjs

react-native