如何渲染SectionList组件中每个部分的背景

Question

如何渲染每个部分的背景？

<SectionList
keyExtractor={(item, index) => index.toString()}
sections={list}
renderItem={({ item }) => <Text>{item.name}</Text>}
renderSectionHeader={({ section }) => {
return (
<View bg-bg6ColorLabel style={{ width: 170, borderRadius: 500, alignSelf: 'center', marginTop: 20 }}>
<Text textColor style={{ textAlign: 'center', padding: 7, fontWeight: 'bold', fontSize: 16 }}>{section.titleWithDay}</Text>
</View>
)
}}
/>

我想在本节的每一项下都有背景资料。

Answer 1

就像这样：

<SectionList
keyExtractor={(item, index) => index.toString()}
sections={list}
renderItem={props => {
if (props.index < 1) {
return (
<View>
<FlatList
data={props.section.data}
renderItem={({ item }) => (
<Text>{item.name}</Text>
)}
/>
</View>
);
} else {
return null;
}
}}
renderSectionHeader={({ section }) => {
return (
<View >
<Text>{section.titleWithDay}</Text>
</View>
)
}}
/>