rn中实现吸顶效果用ScrollView、SectionList、FlatList都可以实现,因为SectionList、FlatList都是继承自ScrollView,都会有stickyHeaderIndices属性,这个属性是一个数组,可以决定下标为几的组件有吸顶的效果。
<FlatList
data={processedData}
stickyHeaderIndices={[2]}
renderItem={this.renderItemView}
onEndReachedThreshold={0.1}
ListEmptyComponent={this.renderEmptyView}
onRefresh={this.onBillListRefresh}
onEndReached={this.onFooterEnd}
ListFooterComponent={this.renderFooter}
>
以上面的例子为例,要实现吸顶很简单,data中插入数据即可,stickyHeaderIndices设置为想自定的下标,但是需要在renderItemView中处理渲染组件,需要区分渲染的部分是什么,例:
const processedData = [
{ type: "view", key: "view-key" },
{ type: "tab", key: "tab-key" },
...this.props?.list
];
renderItemView = ({ item, index }) => {
switch (item.type) {
case "view":
return this.renderViewCmp();
case "tab":
return (
<>
{this.renderTabCmpt()}
{this.renderBannerCmpt()}
</>
);
default:
return this.renderItemCmpt({ item, index });
}
};