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道具期望此要求的结果

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或状态对象内部，并按如下方式有条件地传递源。

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

这里是博览会link

Answer 3

Group Name | Member 1 | Member 2 | Member 3

条件ImageBackground React Native / JSX

3 个答案: