ScrollView高度适合内容

Question

我似乎无法管理这种简单的布局，并且我为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应该只取其内容所需的高度，但不能取。 有什么建议吗？

Answer 1

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

看看这个FlatList

https://reactnative.dev/docs/flatlist

否则，您可以使用FlatList属性在stickyHeaderIndices中渲染页眉，并以这些样式将页脚放置在ScrollView之外。

这将起作用

ScollView