Вставьте динамическую переменную в таблицу стилей React Native

У меня есть собственный вид реакции, который я хочу динамически стилизовать. Значение reaction будет получено из API, поэтому я хочу передать его в свою таблицу стилей.

const Weather = ({ reaction, temperature }) => {
//const bg = `weatherconditions.${reaction}.color`
return (
    <View
      style = {{ backgroundColor: weatherConditions[reaction].color }}>

Таблица стилей выглядит так

export const weatherConditions = {
  Rain: {
    color: '#005BEA',
    title: 'Raining',
    subtitle: 'Get a cup of coffee',
    icon: 'weather-rainy'
  },
  Clear: {
    color: '#f7b733',
    title: 'So Sunny',
    subtitle: 'It is hurting my eyes',
    icon: 'weather-sunny'
  },


Thunderstorm: {
    color: '#616161',
    title: 'A Storm is coming',
    subtitle: 'Because Gods are angry',
    icon: 'weather-lightning'
  },
  Clouds: {
    color: '#1F1C2C',
    title: 'Clouds',
    subtitle: 'Everywhere',
    icon: 'weather-cloudy'
  },

  Snow: {
    color: '#00d2ff',
    title: 'Snow',
    subtitle: 'Get out and build a snowman for me',
    icon: 'weather-snowy'
  },
    }

где Clear, Rain, ThunderStorm может быть значением reaction Я хочу динамически предоставлять значение reaction.

я пытался сделать это

const Weather = ({ reaction, temperature }) => {
const bg = `weatherconditions.${reaction}.color`;
return (
    <View
      style = {{ backgroundColor: bg }}
    >

<View
    style = {{ backgroundColor: ${bg }}>

Но ни один из них, кажется, не работает. Любая помощь в решении этой проблемы будет оценена по достоинству.

javascript css reactjs react-native

18.02.2019 01:48

Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией

В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.

Концепция локализации и ее применение в приложениях React ⚡️

Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...

Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer

В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...

Безумие обратных вызовов в javascript [JS]

Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...

Система управления парковками с использованием HTML, CSS и JavaScript

Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...

JavaScript Вопросы с множественным выбором и ответы

Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...

3 056

Ответы 1

Не уверен, что это то, что вы имеете в виду, но надеюсь, что это поможет.

const styles = {
  weather = reaction => ({
    backgroundColor: reaction
  })
}

А затем в своем теге <View/> укажите реакцию

...
<View style = {StyleSheet.flatten([styles.weather(reaction)])}>
 //Your code here
</View>

Чтобы получить запись объекта динамически, вы можете попробовать object[String(outerKey)].innerKey или класс Object. например Object.entries(object), и это вернет пару данных, key:value, и получит доступ к значению по ключу. const color = Object.values(weatherConditions[reaction]).color

— 20.02.2019 19:54

20.02.2019 19:44