Question

我正在创建一个天气应用程序，我希望根据从OpenWeatherMaps API获取的天气条件动态更改背景颜色。但是，我不确定如何执行此操作，因为我收到一条错误消息：“Undefined不是对象（接近'...}）颜色......'）

现在我已经在一个名为WeatherConditions的单独文件中预先定义了条件，我希望我的Weather文件中的props可以确定背景颜色。我怎么能这样做？

这是我在Weather文件中的渲染方法。问题在于返回后的第一个视图标记：

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


}

Answer 1

应该是

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

请注意语法weatherConditions[weatherCondition].color，您不需要任何大括号。

weatherConditions是一个对象，weatherCondition是可变的。要按变量名访问属性，请使用括号表示法。

在React native中动态设置背景颜色

1 个答案: