条件ImageBackground React本机/ JSX

Question

我知道我只是有一个语法问题，但这里。

我正在构建一个天气应用程序，其中的背景图像源根据天气条件而变化。我的报价和天气描述工作，但有问题的背景图像设置的基础上相同的条件。

const weatherCases = {
"clear sky": {
    title: "clear sky",
    background: "../assets/sunnyBackground.png",
    quote1: "My whole life has been sunshine. I like sunshine, in a certain way.",
}}

return ( 
    <ImageBackground source={weatherCases[weatherName].background} style={styles.forecastContainer}> 

      <View style={styles.forecastTopContainer}>
        <View>
          <Text style={styles.quoteText} >{weatherCases[weatherName]["quote" + randomQuoteNumber.toString()]}</Text>
        </View>
      </View>

      <View style={styles.forecastBottomContainer}>

        <View style={styles.forecastImageContainer}>
          <Text>IMAGE</Text>
        </View>
        <View style={styles.forecastTempContainer}>
          <Text>{city}</Text>
          <Text>{temp}°</Text>
          <Text>{weatherCases[weatherName].title}</Text>
          <Text>{hum}% Humidity</Text>
        </View>
      </View>
    </ImageBackground>

Answer 1

您需要专门require()您将使用的每个图像资源。ImageBackground source prop预期此要求的结果

const sunnyBg = require("../assets/sunnyBackground.png")

...

"clear sky": {
    title: "clear sky",
    background: sunnyBg,
    quote1: "My whole life has been sunshine. I like sunshine, in a certain way.",
}}

Answer 2

您可以定义一个条件变量，它可能在json或state对象中，并有条件地传递源代码，如下所示。

<ImageBackground source={this.state.conditional?require('./assets/snack-icon.png'):null}>

这是一个世博会的link

Answer 3

import LadyInGrass from '../../../assets/images/lady_in_grass.jpg';

<ImageBackground
      style={styles.imageStyle}
      source={imageSource ?? LadyInGrass}>
 </ImageBackground>