反应原生：有办法安排平面列表吗？

Question

Here is an example of a flat-list when I want to display my data in the following order: If the object containing USERSTATUS is urgent then it will appear in the flat-list at top up location and the text will be red in color. If USERSTATUS is not urgent then the object in the flat-list arrangement will be according to the WI_CD field with the oldest being the flat-list top.

this is my code example :

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>
    );
  }
}

this is the example of the 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

You should sort your data before rendering it in the 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));

I would

• Sort first by WI_CD
• Then sort by USERSTATUS being urgent

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

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

Then modify the renderItem function

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

}

Example Snack: https://snack.expo.io/@hannigan/curious-juice-box