动态作出反应在设置背景颜色天然

问题描述 投票:0回答:1

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


}
reactjs react-native background-color react-props
1个回答
0
投票

它应该是

<View style={[weatherContainer, {
  backgroundColor: weatherConditions[weatherCondition].color
}]}>

注意语法weatherConditions[weatherCondition].color,你不需要任何大括号。

weatherConditions是一个对象,weatherCondition是可变的。要通过变量名称访问属性,使用括号表示法。

© www.soinside.com 2019 - 2024. All rights reserved.