Условный ImageBackground React Native / 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

Вы можете определить условную переменную, которая может находиться внутри json или объекта состояния, и условно передать источник следующим образом.

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

Вот выставка ссылка

Answer 2

Вам необходимо специально 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.",
}}