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 时 with contenContainerStyle

直接在renderItems内添加样式 with not use contentContainerStyle

Answer 1

给自己的身体一种风格。
```
style={styles.bodyContainer}
```

，然后在StyleSheet中添加属性。

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

这是正确的方法或

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

FlatList中标头和正文的分隔符样式

1 个答案: