I'm创造我想要的背景颜色,以基于从OpenWeatherMaps API获取天气状况动态地改变天气应用。不过,我可不是真的知道如何做到这一点,因为我得到一个错误,指出消息:“未定义是不是一个对象(近‘...}]颜色......’)
现在,从来就预先定义的所谓WeatherConditions一个单独的文件的条件,我想在我的天气文件中的道具来确定的背景颜色。我怎样才能做到这一点?
这是我在天气文件渲染方法。问题就出在第一观看标签返回后:
render() {
const {
weatherCondition,
city,
country,
temperature,
placeholder,
weatherDescription,
getWeather,
handleTextChange,
searchedCity
} = this.props;
const {
weatherContainer,
headerContainer,
tempText,
tempContainer,
bodyContainer,
inputContainer,
textInputStyle,
subtitle,
title
} = styles;
return (
<View
style={[
weatherContainer,
{
backgroundColor:
weatherConditions[{ weatherCondition }].color
}
]}
>
{" "}
// Does not work right now.
<View style={headerContainer}>
<Text style={tempText}>
{" "}
{city} {country}
</Text>
<Text style={tempContainer}>
{" "}
{Math.round(temperature)}
˚C
</Text>
</View>
<View style={bodyContainer}>
<View style={inputContainer}>
<TextInput
style={textInputStyle}
onChangeText={searchedCity =>
handleTextChange(searchedCity)
}
onSubmitEditing={() => getWeather()}
placeholder={placeholder}
clearTextOnFocus={true}
enablesReturnKeyAutomatically={true}
/>
</View>
<Text style={title}>{weatherCondition}</Text>
<Text style={subtitle}>{weatherDescription}</Text>
</View>
{this.renderLoading()}
</View>
);
}
我WeatherCondition文件:
export const weatherConditions = {
Thunderstorm: {
color: '#303952'
},
Drizzle: {
color: '#8aacb8'
},
Rain: {
color: '#786fa6'
},
Snow: {
color: '#00d8d6'
},
Atmosphere: {
color: '#ff5252'
},
Clear: {
color: '#f5cd79'
},
Clouds: {
color: '#0be881'
},
}
它应该是
<View style={[weatherContainer, {
backgroundColor: weatherConditions[weatherCondition].color
}]}>
注意语法weatherConditions[weatherCondition].color
,你不需要任何大括号。
weatherConditions
是一个对象,weatherCondition
是可变的。要通过变量名称访问属性,使用括号表示法。