Question

我正在尝试将条件样式应用于文本元素。文本值是从实时API中提取的。

我有一个火车实时状态应用程序，它为每条线路返回“良好服务”，“轻微延误”等。我想根据值更改文本的样式。如果显示“优质服务”，我将保持文字正常。如果还有其他说明，我想将其更改为红色字体。

请参阅我的Expo Snack原型。 https://snack.expo.io/@leourushi/api+conditional-styling

这是我从实时API中提取每条火车线路信息的地方。我正在使用axios方法在显示它们之前准备好所有行。

  async componentDidMount(){
    var request_1 = 'https://api.tfl.gov.uk/Line/bakerloo/Status';
    var request_2 = 'https://api.tfl.gov.uk/Line/central/Status';
    var request_3 = 'https://api.tfl.gov.uk/Line/circle/Status';
    var request_4 = 'https://api.tfl.gov.uk/Line/district/Status';
    var request_5 = 'https://api.tfl.gov.uk/Line/hammersmith-city/Status';


  const [func1, func2, func3, func4] = await Promise.all([
    axios.get(request_1),
    axios.get(request_2),
    axios.get(request_3),
    axios.get(request_4)
  ]);

  const func5 = await axios.get(request_5);

  this.setState({
    dataSource: func1.data[0].lineStatuses,
    dataSource2: func2.data[0].lineStatuses,
    dataSource3: func3.data[0].lineStatuses,
    dataSource4: func4.data[0].lineStatuses,
    dataSource5: func5.data[0].lineStatuses,

    isLoading: false
  });

然后在此处显示提取的字符串：

        <FlatList
          style={styles.rightColumn}
          data={this.state.dataSource}
          renderItem={({item}) => <Text style={styles.rightColumnText}>{item.statusSeverityDescription} </Text>}
          keyExtractor={({id}, index) => id.toString()}
        />

结果通常显示为“良好服务”，“轻微延迟”或其他简短短语。

我想根据API调用返回的结果来更改文本的样式（styles.rightColumn）。有没有一种方法可以更改样式，使其表现如下？

如果返回“ Good Service” =纯黑色字体。

如果返回其他任何内容，则为红色字体。

Answer 1

您可以通过如下修改renderItem函数来轻松实现此行为：

renderItem={({item}) => <Text style={[styles.rightColumnText, {color:  item.statusSeverityDescription == "Good Service" ? 'black' : 'red'}]}>{item.statusSeverityDescription} </Text> }

说明：

在这里，我们根据item.statusSeverityDescription的值来覆盖标准颜色。如果状态不等于“良好服务”，我们将字体颜色更改为红色。顺便说一句，在此示例中，我们使用三元运算符。

style={[styles.rightColumnText, {color:  item.statusSeverityDescription == "Good Service" ? 'black' : 'red'}]}

根据API调用返回的文本进行本机条件样式设置

1 个答案: