Реагируйте на собственные условные стили на основе текста, возвращаемого вызовом API - PullRequest
Новая
       22

Реагируйте на собственные условные стили на основе текста, возвращаемого вызовом API

1 голос
/ 08 июня 2019

Я пытаюсь применить условное оформление к текстовым элементам. Текстовые значения извлекаются из реального API.

У меня есть приложение для отслеживания состояния поезда, которое возвращает «Good Service», «Minor Delay» и т. Д. Для каждой строки. Я хотел бы изменить стиль текста в зависимости от значения. Если будет написано «Хорошее обслуживание», я сохраню текст в норме. Если это говорит о чем-то еще, я хотел бы изменить его на красный шрифт.

Пожалуйста, смотрите мой прототип Экспо Снэк. 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()}
        />

Результат обычно говорит «Хорошее обслуживание», «Незначительные задержки» или другие короткие фразы.

Я хочу изменить стиль текста (styles.rightColumn) в зависимости от результата, возвращаемого вызовом API. Есть ли способ изменить стиль так, чтобы он вел себя так, как показано ниже?

Если возвращается «Good Service» = простой черный шрифт.

Если он возвращает что-нибудь еще = красный шрифт.

1 Ответ

1 голос
/ 08 июня 2019

Вы можете легко добиться этого поведения, изменив функцию renderItem следующим образом: 

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

Объяснение:

Здесь мы переопределяем наш стандартный цвет в зависимости от значения item.statusSeverityDescription. Если статус не равен «Good Service», мы меняем цвет шрифта на красный. Кстати, в этом примере мы используем троичный оператор. 

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