如何将不同的样式应用于已交付和待处理的部分列表?
我想更改状态数据的颜色文本。
像状态数据待定文本应该是红色的。
传递的状态数据文本应该是绿色的。
我怎样才能做到这一点?
或者我应该手动输入这些数据?s
代码如下:
const delivered = [
{
id: 1,
title: 'Lanche, MADERO',
description: 'Rua Joao da silva, 22, 12 horas atrás',
status: 'Situação: Delivered',
},
{
id: 2,
title: 'McDonalds',
description: 'Rua Joao da silva, 22, 12 horas atrás',
status: 'Situação: Delivered',
},
{
id: 3,
title: 'Bobs',
description: 'Rua Joao da silva, 22, 12 horas atrás',
status: 'Situação: Delivered',
},
{
id: 4,
title: 'Burguer King',
description: 'Rua Joao da silva, 22, 12 horas atrás',
status: 'Situação: Delivered',
},
{
id: 5,
title: 'Outback',
description: 'Rua Joao da silva, 22, 12 horas atrás',
status: 'Situação: Delivered',
},
{
id: 6,
title: 'Esfiha',
description: 'Rua Joao da silva, 22, 12 horas atrás',
status: 'Situação: Delivered',
},
{
id: 7,
title: 'Habibs',
description: 'Rua Joao da silva, 22, 12 horas atrás',
status: 'Situação: Delivered',
},
{
id: 8,
title: 'McDonalds',
description: 'Rua Joao da silva, 22, 12 horas atrás',
status: 'Situação: Delivered',
},
];
const pending = [
{
id: 1,
title: 'Sushi Garden',
description: 'Rua Joao da silva, 22, 12 horas atrás',
status: 'Situação: Pending',
},
{
id: 2,
title: 'Gendai Sushi',
description: 'Rua Joao da silva, 22, 12 horas atrás',
status: 'Situação: Pending',
},
];
export default class LastOrders extends Component {
renderItem = ({item}) => (
<TouchableOpacity
onPress={() => {
const {navigation} = this.props;
navigation.navigate('OrderDetail');
}}>
<View style={styles.productContainer}>
<Text style={styles.productTitle}>{item.title}</Text>
<Text style={styles.productDescription}>{item.description}</Text>
<Text style={styles.productStatus}>{item.status}</Text>
</View>
</TouchableOpacity>
);
render() {
return (
<View style={styles.container}>
<SectionList
sections={[
{title: 'Entregas Pendentes', data: pending},
{title: 'Entregas Completas', data: delivered},
]}
renderItem={this.renderItem}
renderSectionHeader={({section}) => (
<View>
<Text style={styles.header}>{section.title}</Text>
</View>
)}
showsVerticalScrollIndicator={false}
keyExtractor={(item) => item.id}
/>
</View>
);
样式代码如下:
import {StyleSheet} from 'react-native';
export default StyleSheet.create({
container: {
flex: 1,
backgroundColor: '#fff',
},
list: {
padding: 20,
},
productContainer: {
backgroundColor: '#f5f5f5',
borderWidth: 1,
borderColor: '#fff',
borderRadius: 4,
padding: 20,
marginBottom: 20,
},
productTitle: {
fontSize: 18,
fontWeight: 'bold',
color: '#000',
},
productDescription: {
fontSize: 16,
color: '#999',
marginTop: 5,
lineHeight: 24,
},
productStatus: {
fontSize: 16,
color: 'red',
marginTop: 5,
lineHeight: 24,
},
header: {
fontWeight: 'bold',
fontSize: 20,
marginTop: 30,
marginLeft: 20,
},
});