Question

当我想按以下顺序显示数据时，这里是一个平面列表的示例：如果包含USERSTATUS的对象是紧急对象，则它将出现在补充列表的平面列表中，并且文本将为红色。如果USERSTATUS不紧急，则列表列表中的对象将根据WI_CD字段，最早的是列表顶部。

这是我的代码示例：

renderItems = (item, index) => {
    const { ORDER_TYPE, TOTAL_COSTS_PLAN, SHORT_TEXT } = item;

    return (
      <TouchableHighlight
        style={{
          backgroundColor: "#ffff78"
        }}
      >
        <TouchableOpacity
          style={{
            flex: 1,
            paddingVertical: 15,
            paddingHorizontal: 10,
            flexDirection: "row",
            justifyContent: "space-between",
            alignItems: "center",
            borderWidth: 0.8,
            borderColor: "#d5d7db",
            backgroundColor: index % 2 == 0 ? "#d1f0da" : "#f2f5f3"
          }}
          onPress={() =>
            this.props.navigation.navigate("Info", {
              data: item,
              itemIndex: index,
              approvers: this.state.approvers
            })
          }
        >
          <View
            style={{
              flex: 2,
              alignItems: "flex-start"
            }}
          >
            <Text
              style={{
                justifyContent: "flex-start",
                alignItems: "flex-start",
                fontSize: 18,
                color: "black",
                textAlign: "left"
              }}
            >
              {SHORT_TEXT}
            </Text>
          </View>
          <View
            style={{
              height: 60,
              alignItems: "flex-end",
              borderLeftWidth: 3,
              borderLeftColor: "#66a5ba"
            }}
          >
            <Text></Text>
          </View>
          <View
            style={{
              flex: 1,
              flexDirection: "column",
              alignItems: "flex-end"
            }}
          >
            <Text style={styles.name}>{ORDER_TYPE}</Text>
            <Text style={styles.name}>
              {Math.floor(TOTAL_COSTS_PLAN)
                .toString()
                .replace(/\B(?=(\d{3})+(?!\d))/g, ",")}
            </Text>
          </View>
        </TouchableOpacity>
      </TouchableHighlight>
    );
  };
return (
        <View style={styles.container}>
          <FlatList
            data={this.state.data}
            keyExtractor={(_, index) => String(index)}
            renderItem={({ item, index }) => {
              return this.renderItems(item, index);
            }}
          />
        </View>
    );
  }
}

这是json的示例：

[
  {
    "LONG_TEXT": "snack",
    "WI_ID": "000018649237",
    "USERSTATUS": "urgent",
    "WI_CD": "2020-03-04",
    "SHORT_TEXT": "bambook",
    "ORDERID": "000004698987",
    "ORDER_TYPE": "YM02",
    "TOTAL_COSTS_PLAN": 100,
  },
 {
    "LONG_TEXT": "worm",
    "WI_ID": "000017649024",
    "USERSTATUS": "Regular",
    "WI_CD": "2020-03-02",
    "SHORT_TEXT": "soap",
    "ORDERID": "000001695977",
    "ORDER_TYPE": "YM34",
    "TOTAL_COSTS_PLAN": 200,
  }
]

Answer 1

您应该先对数据进行排序，然后再将其呈现在FlatList中

const isUrgent = ({ USERSTATUS }) => USERSTATUS === "urgent";

const getDataSortedByUserStatus = data => data.sort((a, b) => {
  if(isUrgent(a) && !isUrgent(b)) return -1;
  if(isUrgent(b) && !isUrgent(a)) return 1;
  return 0;
});

const getDataSortedByDate = data => data.sort((a, b) => new Date(a.WI_CD) - new Date(b.WI_CD));

我会

按WI_CD先排序
然后按USERSTATUS的紧急程度进行排序

const dataSortedByDate = getDataSortedByDate(this.state.data);
const dataSortedByUserStatus = getDataSortedByUserStatus(dataSortedByDate);

<FlatList
  data={dataSortedByUserStatus}
  renderItem={renderItem}
/>

然后修改renderItem函数

const renderItem = ({ item }) => {
  const isUrgentItem = isUrgent(item);
  const { SHORT_TEXT } = item;
  return (
    ...
    <Text
      style={{ 
        color: isUrgentItem ? 'red' : 'black'
      }} 
    >
      {SHORT_TEXT}
    </Text> 
    ...
  )

}

小吃示例：https://snack.expo.io/@hannigan/curious-juice-box

反应本地人：有没有办法安排平面清单？

1 个答案: