在 React Native 中具有交替颜色的列表视图
Listview with alternating color in react native
我有如下例所示的对象数组;
[{
"id" : 13100,
"key" : "Emlak Vergisi",
"y" : 135638.98
}, {
"id" : 13154,
"key" : "Çevre Temizlik ",
"y" : 956.17
}, {
"id" : 19998,
"key" : "Genel Tahakkuk",
"y" : 89030.62
}, {
"id" : 24998,
"key" : "Gecekondu ve So",
"y" : 42721.07
}, {
"id" : 60000,
"key" : "Ortak Gelirler",
"y" : 827.42
}
]
是否可以为每个项目创建一个颜色交替的列表视图?
是在 renderRow 中,根据 rowID 或 rowData 等应用不同的样式
例如:
renderRow(rowData, sectionID, rowID, highlightRow) {
if(rowID%2 === 0) {
return (<View style={{backgroundColor: 'blue'}}/>);
}
return (<View style={{backgroundColor: 'red'}}/>);
}
您可以使用 renderRow 函数中提供的 rowId。我已经设置了一个工作示例 here
渲染行方法:
renderRow = (rowData, sectionId, rowId) => {
if (rowId % 2) {
return (
<View style={{backgroundColor: 'red'}}>
<Text>{rowData.id}</Text>
</View>
);
} else {
return (
<View style={{backgroundColor: 'blue'}}>
<Text>{rowData.id}</Text>
</View>
);
}
};
我会说这种方法更干净:
renderRow(rowData, sectionID, rowID) {
let style = [
styles.row,
{'backgroundColor': colors[rowID % colors.length]}
];
return (<View style={style}/>);
}
let colors = ['#123456', '#654321', '#fdecba', '#abcdef'];
let styles = StyleSheet.create({
row: {
// .. rows style
}
});
通过这种方式,您可以轻松地为列表中的每一行添加特殊颜色(不仅是 even/odd 类型)
(Provided Array).map((array, index) => {
return (
<View style={{ backgroundColor: (index % 2 == 0) ? '#ecf0f1' : '#fff' }}>
<Text>{array.key}</Text>
</View>
)
})
我有如下例所示的对象数组;
[{
"id" : 13100,
"key" : "Emlak Vergisi",
"y" : 135638.98
}, {
"id" : 13154,
"key" : "Çevre Temizlik ",
"y" : 956.17
}, {
"id" : 19998,
"key" : "Genel Tahakkuk",
"y" : 89030.62
}, {
"id" : 24998,
"key" : "Gecekondu ve So",
"y" : 42721.07
}, {
"id" : 60000,
"key" : "Ortak Gelirler",
"y" : 827.42
}
]
是否可以为每个项目创建一个颜色交替的列表视图?
是在 renderRow 中,根据 rowID 或 rowData 等应用不同的样式
例如:
renderRow(rowData, sectionID, rowID, highlightRow) {
if(rowID%2 === 0) {
return (<View style={{backgroundColor: 'blue'}}/>);
}
return (<View style={{backgroundColor: 'red'}}/>);
}
您可以使用 renderRow 函数中提供的 rowId。我已经设置了一个工作示例 here
渲染行方法:
renderRow = (rowData, sectionId, rowId) => {
if (rowId % 2) {
return (
<View style={{backgroundColor: 'red'}}>
<Text>{rowData.id}</Text>
</View>
);
} else {
return (
<View style={{backgroundColor: 'blue'}}>
<Text>{rowData.id}</Text>
</View>
);
}
};
我会说这种方法更干净:
renderRow(rowData, sectionID, rowID) {
let style = [
styles.row,
{'backgroundColor': colors[rowID % colors.length]}
];
return (<View style={style}/>);
}
let colors = ['#123456', '#654321', '#fdecba', '#abcdef'];
let styles = StyleSheet.create({
row: {
// .. rows style
}
});
通过这种方式,您可以轻松地为列表中的每一行添加特殊颜色(不仅是 even/odd 类型)
(Provided Array).map((array, index) => {
return (
<View style={{ backgroundColor: (index % 2 == 0) ? '#ecf0f1' : '#fff' }}>
<Text>{array.key}</Text>
</View>
)
})