Question

我有一个使用val intent = Intent(this, Main2Activity::class.java) intent.putExtra("samplename", "abd") startActivity(intent)的简单示例，我似乎无法滚动到底部。

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

Expo Code

ScrollView

output image

Answer 1

我的应用程序中只有一个ScrollView，并且运行正常。然后，我在顶部添加了标头组件，而ScrollView的底部不再可见。我尝试了一切，但没有任何效果。经过一个小时的尝试，我终于找到了解决方案。我通过将paddingBottom作为contentContainerStyle添加到ScrollView中来解决此问题。

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

Answer 2

修改您的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> ); }容器中，并将{{1}}设置为该{{1}}容器：

{{1}}

Answer 3

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

Answer 4

将flexGrow: 1中的contentContainerStyle设置为ScrollView

contentContainerStyle={{ flexGrow: 1 }}

Answer 5

我有这个问题并修复了它。解决它： flex：1表示“将其扩展为其父级”，如果父级的高度为0，则无效 flex：-1表示“缩小它以适合其子大小”，如果子高度设置为flex：1（取决于父级） - ＆gt;它不会工作 - ＆gt;你问我？我问你回来环。 scrollview中有两个视图 - ＆gt; {flex:1}外部视图包含{flex:-1}内部视图。当内部视图比外部视图高时，就是当滚动发生时。它还意味着外部视图高度取决于scrollview父级，内部视图取决于子级。如果您无法为其外部视图指定高度，则外部视图将变为0高度。您无法使用0高度外部视图滚动内部视图，一旦手指释放，它将始终弹回原点位置。用<View style={{flex:1}}>包裹它可能会或可能不会解决你的问题，因为这意味着scrollview的父级扩展自己以适应其父级，高度则取决于它的父级。（滚动视图的大父母）。因此，如果您的祖父母没有定义身高，则会失败。

以下示例无效

<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

当然！将填充应用于“ contentContainerStyle”道具，而不是ScrollView的“ style”道具。

Answer 8

我通过将Scrollview的contentInset bottom属性设置为一个足以让我看到内容的最底部（在我的情况下为按钮）的值来解决问题。

示例：

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

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

8 个答案: