css - 在 React Native SectionList 上应用样式
问题描述
如何将不同的样式应用于已交付和待处理的部分列表?
我想更改状态数据的颜色文本。
像状态数据待定文本应该是红色的。
传递的状态数据文本应该是绿色的。
我怎样才能做到这一点?
或者我应该手动输入这些数据?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,
},
});
解决方案
您只需要有条件地设置样式。
您的 renderItem 应该如下所示,这里我直接比较了字符串,如果您有某种状态的 ID 更好地比较它。
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={
item.status === 'Situação: Pending'
? styles.productStatus
: styles.productStatusDelivered
}>
{item.status}
</Text>
</View>
</TouchableOpacity>
);
你也需要这样的新风格
productStatusDelivered: {
fontSize: 16,
color: 'green',
marginTop: 5,
lineHeight: 24,
},
推荐阅读
- javascript - 尝试结合 PassportJS 和 ReCAPTCHA V2 时出错。“SyntaxError:JSON.parse:JSON 数据第 1 行第 1 列的意外字符”
- react-native - 从另一个堆栈重置 React Stack Navigator
- javascript - 使用 VUE.js 加载内容
- python-3.x - python中随机森林处理中多维数组和扁平数组的区别
- html - 如何制作一个输入框,当输入特定代码时将用户转发到单独的页面?
- c++ - 如何正确使用 setw() 格式化输出?
- django - 您可以在 django 中使用 URL 模板标记参数设置第三个选项 URL path() 字典的值吗?
- python - python RuntimeWarning:在减去 x = asanyarray(arr - arrmean) 中遇到无效值
- java - 我得到一个 java.lang.NullPointerException,有人告诉我解决它的方法
- java - 没有确定主要方法?