自适应内容的 ScrollView 高度

Question

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

红色：屏幕
蓝色：内容header
绿色：内容（滚动视图）
黄色：内容页脚

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

我的问题是 ScrollView 应该只采用其内容所需的高度，但实际上没有。有什么建议吗？

Answer 1

您可以使用 FlatList 并使用它的 ListFoooterComponent 和 ListHeaderComponent 来呈现您的 header 和页脚，您也可以使用 ScrollView 来呈现它们，但是它建议使用 FlatList 以获得更高的性能和支持。

看看这个 FlatList

https://reactnative.dev/docs/flatlist

否则，您可以使用 stickyHeaderIndices 属性在 ScollView 中呈现 header，并使用这些样式将页脚放在 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>

自适应内容的 ScrollView 高度

ScrollView height adapting to content

scrollview

react-native