react-native - 如何在 react native flat list 中同时显示静态内容和动态内容？

Question

我有一个带有顶部横幅和一些文本的视图，之后有一个使用分页的产品列表，我想做的是使用平面列表，有没有办法配置它，以便在我的 renderItems 中我会退回我的产品并将静态内容放在同一个平面列表中？

Answer 1

如果您的横幅和文本将始终位于产品列表的顶部，那么您可以使用Flatlist的ListHeaderComponent 属性来呈现静态内容（例如横幅和文本）。

<FlatList
     ...
     ListHeaderComponent={this.renderHeader}
/>

Answer 2

如果您在平面列表之前有固定的横幅和一些文本。您可以将横幅、文本和平面列表包装在 scrollView 中。这将按您的意愿工作。

    render(){
     return(
       <ScrollView>
        this.renderBanner();
        this.renderText();
        this.renderFlatList();
      </ScrollView)
    }