FlatList 中 header 和 body 的分隔符样式

Question

目前，我在使用 FlatList 时遇到了问题。我有一个组件来呈现列表簿。根据设计，header 的宽度是屏幕的宽度，body 将左右填充 10px。

所以我用了contentContainerStyle={{paddingHorizontal: 10}}。但结果是 header 和 body 左右填充 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的左右边距，而不是整个body.

使用时contentContainerStyle with contenContainerStyle

直接在里面添加样式时renderItems with not use contentContainerStyle

Answer 1

给你的body一个风格。
```
style={styles.bodyContainer}
```

然后在 StyleSheet 中添加属性.

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

这是正确的方法或者

您可以直接在视图中添加内边距。
```
style={{ paddingHorizontal: 10 }}
```

FlatList 中 header 和 body 的分隔符样式

Separator style for header and body in FlatList

react-native

react-native-flatlist