FlatList中页眉和正文的分隔符样式

Question

当前，我的FlatList有问题。我有一个组件来呈现一本列表书。根据设计，页眉的宽度是屏幕的宽度，正文将左右填充10px。

所以我用了contentContainerStyle={{paddingHorizontal: 10}}。但结果是标题和正文的左右两边都是10px的填充。

请提出解决问题的方法。很抱歉我的英语不好！！

更新：很抱歉没有彻底描述我的问题。

在main.tsx中

...
public render() {
return (
<FlatList
key...
data={..}
renderItem={this.renderItems}
ListHeaderComponent={this.renderHeader}
contentContainerStyle={styles.contentStyle}
/>
);
}
private renderHeader = () => {
return (
<View style={style.header}
//TODO something ...
</View>
);
}
private renderItems: ListRenderItem<IBook> = ({ item: {bookId} }) => bookId ?
(
<BookGridCell
title={...}
image={...}
//TODO more..
/>
) : <View style={styles.emptyBox} /> 
}

在renderItems，我将一个组件称为BookGridCell。在这个组件中，设置了一本书的设计。所以，如果我直接在renderItems中添加样式，每本书的左右边距都是10px，而不是整个正文。

将contentContainerStyle与contentContainerStyle 一起使用时

直接在renderItems内部添加样式时不使用contentContainerStyle

Answer 1

1. 给你的身体一种风格。

   style={styles.bodyContainer}
   

，然后在样式表中添加属性。

const styles = StyleSheet.create({
bodyContainer: {
paddingHorizontal: 10    
},

这是正确的方式或

2. 您可以直接在视图中添加填充。

   style={{ paddingHorizontal: 10 }}