React native 滚动视图高度适应内容

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

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

{contentHeader}
{content}
{contentFooter}

我的问题是，ScrollView应该只获取其内容所需的高度，而不是。

---

有什么建议吗？

您可以使用

FlatList

并使用其

ListFooterComponent

和

ListHeaderComponent

来呈现页眉和页脚，您也可以使用

ScrollView

来呈现这些页眉和页脚，但建议使用

FlatList

，以获得更高的性能和支持

请查看此列表以

FlatList

否则，您可以使用

stickyHeaderIndices

prop在

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>

{contentHeader}
{content}
我最终使用了你的第二个解决方案，因为我无法使用Flatlist实现内容的动态高度（当我使用flexGrow:0时，由于某些原因页眉和页脚会消失），我删除了“position:“absolute，bottom:0”，因为我不希望它们位于屏幕底部，而只是位于图像中的内容下方。使用StickyHeadering会将标题下的内容滚动，因此并不完美。谢谢你的帮助！
<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>