react-native - FlatList 中标题和正文的分隔符样式
问题描述
目前,我遇到了 FlatList 的问题。我有一个组件来呈现列表簿。按照设计,标题的宽度是屏幕的宽度,正文将左右填充 10px。
所以我用contentContainerStyle={{paddingHorizontal: 10}}
. 但是结果是header和body都是10px左右的padding。
请提出解决方法。对不起,我的英语不好!!
更新:我很抱歉没有彻底描述我的问题。
在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
解决方案
给你的身体一种风格。
style={styles.bodyContainer}
然后在 StyleSheet 中添加属性。
const styles = StyleSheet.create({
bodyContainer: {
paddingHorizontal: 10
},
这是正确的方法或
您可以直接在视图中添加填充。
style={{ paddingHorizontal: 10 }}
推荐阅读
- r - Anova not working at multilevel analysis - "$ operator not defined for this S4 class"
- prometheus - Prometheus 同时监听不同的端口
- angular - 自动调整 textarea 最大 5 行限制,然后显示滚动条
- java - 如何仅使用 java 使用特殊字符(包括空格)创建大小为 5 的非重复随机字符串?
- kubernetes - Helm V3 - 找不到官方仓库
- python - 生成具有 60% 0 和 40% 1 的虚拟数据
- android - Android - 当应用程序移至后台并置于前台时,不维护后台堆栈
- r - 如何从 R 中的两个堆叠的 transitionLayers 中选择每个位置的最大值?
- javascript - 快照时间戳不匹配
- javascript - 如何调整对象的大小 - Autodesk Forge Viewer