FlatList 条件样式未按预期工作

Question

我一直在尝试在 flatlist 上做一些条件样式，但事实证明它并没有完全发挥作用。我不知道我在这里错过了什么，我们将不胜感激。

下面是代码，其中最后一个条件有效 item.status == 5

<Text
  style={[
    item.status == 1 ? styles.Approved : styles.orderStatusText,
    item.status == 2 ? styles.Sold : styles.orderStatusText,
    item.status == 3 ? styles.UnderReview : styles.orderStatusText,
    item.status == 4 ? styles.Inactive : styles.orderStatusText,
    item.status == 5 ? styles.Deleted : styles.orderStatusText
  ]}
>
  {item.status}
</Text>

API代码

UserProducts() {
  fetch(`http://`, {
    method: "GET"
  })
    .then(response => response.json())
    .then(resp => {
      this.setState({
        UserProducts: resp
      });
      console.log("Success", this.state.LastProduct);
      console.log("Test", seller_id);
    })
    .catch(error => {
      console.log("Api call error1");
    });
}

其中一种样式的示例：

  Deleted: {
    fontSize: 12,
    fontFamily: Theme.regularFont,
    color: 'red', 
    paddingLeft: 8,
    fontWeight: '400'
},

Answer 1

  <Text 
     style={[styles.orderStatusText]}>
     {(item.status === 1) ? <Text style={styles.Approved}>Approved</Text> : null}
     {(item.status === 2) ? <Text style={styles.Sold}>Sold</Text> : null}
     {(item.status === 3) ? <Text style={styles.UnderReview}>Under Review</Text> : null}
     {(item.status === 4) ? <Text style={styles.Inactive}>Inactive</Text> : null}
     {(item.status === 5) ? <Text style={styles.Deleted}>Deleted</Text> : null}
</Text>

我碰巧想到并做到了这一点，效果非常好。

FlatList 条件样式未按预期工作

FlatList Conditional Styling not working as expected

javascript

reactjs

react-native

react-native-android