在 React Native SectionList 上应用样式

Question

如何将不同的样式应用于已交付和待处理部分列表？

我想更改状态数据的颜色文本。

赞状态数据待定文本应为红色。

并且状态数据已传递文本应为绿色。

How can I do this?

or I Should put this data manually? 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,
  },
});

Answer 1

你只需要有条件地设置样式即可。

你的 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,
  },

在 React Native SectionList 上应用样式

Apply styles on React Native SectionList

css

react-native

css-in-js