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

我有一个使用

ScrollView

的非常简单的例子，我似乎无法滚动到底部

这个例子是完全基本的，我没有做任何特别的事情，但最后一个项目从来都不是完全可见的

import React，{Component}来自“React”；
从“react native”导入{Text，View，ScrollView，StyleSheet}；
从“expo”导入{Constants}；
const data=Array.from（{length:20}）.map（（u，i）=>i+1）；
导出默认类应用程序扩展组件{
render（）{
返回(
{data.map（d=>(
{d}
))}
);
}
}
const styles=StyleSheet.create({
容器：{
paddingTop:Constants.statusBarHeight
},
正文：{
fontWeight：“粗体”，
颜色：“fff”，
textAlign：“居中”，
尺寸：28
},
视图：{
填充：10，
背景色：“018bbc”
}
});

以下是输出：

修改

render（）

方法，将

滚动视图

包装在

视图

容器中，并将

填充顶部

设置为该

视图

容器：

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

render（）{
返回(
{data.map（d=>{d}}
);
}

我有这个问题，已经解决了。要解决这个问题： flex:1表示“将其扩展到其父级大小”，如果父级的高度为0，则无法工作 flex:-1的意思是“缩小它以适合它的孩子的大小”，如果孩子的高度设置为flex:1（取决于父母）->它不会工作->你问我？我请你回来。环 scrollview中有两个视图->一个

{flex:1}

外部视图包装一个

{flex:-1}

内部视图。当内部视图高于外部视图时，即发生滚动。 这也意味着外部视图高度取决于scrollview父视图，内部视图取决于子视图。如果无法为其外部视图指定高度，则外部视图将变为0高度。您不能使用0高度的外部视图滚动内部视图，一旦手指松开，它将始终反弹回其原始位置。 用

包裹它可能解决问题，也可能无法解决问题，因为这意味着滚动视图的父视图会自行展开以适应其父视图，而高度则取决于它的父视图。（滚动视图的父视图）。所以，如果你的祖父母没有定义身高，那就失败了

下面的例子行不通

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

// 添加了ScrollView的高度样式

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

将填充样式应用于ScrollView的“contentContainerStyle”道具，而不是“style”道具。
我的应用程序中只有一个
ScrollView
，它工作正常。然后我在顶部添加了一个header组件，我的
ScrollView
的底部不再可见。我什么都试了，什么都没用。直到我尝试了一个小时所有疯狂的事情，终于找到了解决办法。我通过将
paddingBottom
作为
contentContainerStyle
添加到我的
ScrollView
中，解决了这个问题

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

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


{this.renderItems（）}
将
flexGrow:1
设置为
滚动视图的
contentContainerStyle

contentContainerStyle={{ flexGrow: 1 }}

我将Scrollview的
contentInset
bottom属性设置为一个值，该值刚好足以让我看到我内容的最底部部分（在我的例子中是一个按钮）

例如：


{{content}}
向容器中添加
flex:1
应该可以trick@AakashSigdel我有一个类似的用例<代码>弹性：1
不起作用。我仍然在摆弄各种道具，但到目前为止，每当我滚动到底部时，视图就会反弹，阻止我选择最后一个项目，这恰好是一个按钮。你应该首先更改正确的答案，这似乎是合乎逻辑的。但是，我在代码中实现了它，没有明显的效果。我的
ScrollView
底部有一个无法访问的按钮，因为轻触释放后视图会反弹回顶部。我希望在视图发布时滚动条保持不变。这解决了meThis的问题似乎非常有效。随着时间的推移，您是否遇到过任何问题？幸运的是，还没有。：）这应该被标记为正确答案。谢谢！你终于向我解释了ScrollView的实际工作原理。在阅读了你的评论后，我可以在5分钟内修复我的ScrollView，这就是我所需要的。我的scrollview在一个模态中，使用contentContainerStyle作为它的样式，但是没有一个真正有用。除了这个。谢谢
<ScrollView contentContainerStyle={{paddingBottom: 60}} >
    {this.renderItems()}
</ScrollView>

contentContainerStyle={{ flexGrow: 1 }}