将动态变量插入React Native样式表中

Question

我有一个我想动态样式的本机视图。reaction的值将从API中获取，因此我想将其传递到我的styleheet

中

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

但是它们似乎都没有用。解决此问题的任何帮助。

Answer 1

不确定这是您的意思，但希望它会有所帮助。

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

，然后在您的<View/>标签中提供反应

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