时间戳

首页 > 解决方案 > ScrollView 高度适应内容

react-native - ScrollView 高度适应内容

问题描述

我似乎无法管理这个简单的布局，而且我为 ScrollView 找到的所有技巧都不符合我的情况。我的内容有一个页眉和一个页脚，应该“坚持”它。但是当我的内容变得太大时，页眉自然会卡在屏幕顶部，页脚在屏幕底部，中间部分被应该可以滚动的内容占据。这是布局的代码，我加入了一些屏幕。

滚动视图中的小内容 滚动视图中的长内容

<View style={styles.screen}>
    <View style={styles.contentHeader}>
        {contentHeader}
    </View>
    <ScrollView style={styles.content}>
        {content}
    </ScrollView>
    <View style={styles.contentFooter}>
        {contentFooter}
    </View>
</View>

我的问题是 ScrollView 应该只取其内容所需的高度，但它没有。有什么建议么 ？

标签： react-nativescrollview

解决方案

您可以使用FlatList和使用它ListFoooterComponent来ListHeaderComponent渲染您的页眉和页脚，您也可以使用它来渲染它们，ScrollView但建议使用它来FlatList获得更高的性能和支持。

看看这个FlatList

https://reactnative.dev/docs/flatlist

否则，您可以使用stickyHeaderIndicesprop 来渲染页眉ScollView并将页脚放置在具有这些样式的 ScrollView 之外。

这将起作用

<View style={styles.screen}>
    <ScrollView style={styles.content} stickyHeaderIndices={[0]}>
       <View style={styles.contentHeader}>
            {contentHeader}
       </View>
       {content}
    </ScrollView>
    <View style={[styles.contentFooter, {position: 'absolute, bottom: 0}]}>
        {contentFooter}
    </View>
</View>

推荐阅读