当我从状态调用源时 ImageBackground 不工作

Question

当我从 state 调用 source 时，ImageBackground 不显示图像。

我尝试使用条件语句，例如最初的可触摸不透明度，但再次不起作用。

state = {
    color1: "../images/yellow-orb.png",
    color2: "../images/yellow-orb.png",
}
<TouchableOpacity onPress={() => this.questSelect(1)}>
          {this.state.color1 ? (
            <ImageBackground
              source={{ uri: this.state.color1 }}
              style={styles.icon2}
            >
              <Text>1</Text>
            </ImageBackground>
          ) : (
            null
          )}
</TouchableOpacity>
<TouchableOpacity onPress={() => this.questSelect(2)}>
          <ImageBackground
            source={{ uri: this.state.color2 }}
            style={styles.icon2}
          >
            <Text>2</Text>
          </ImageBackground>
</TouchableOpacity>

在模拟器上，我可以看到像 1 2 3 .. 这样的文本，但没有图像。

Answer 1

您需要添加 require() 才能从源加载。

例如：

 <ImageBackground
              source={require("../images/yellow-orb.png")}
              style={styles.icon2}
            >
              <Text>1</Text>
 </ImageBackground>

或

像这样更新你的状态，

this.state = {
    color1: require("../images/yellow-orb.png"),
    color2: require("../images/yellow-orb.png"),
}

并直接使用状态值，

 <ImageBackground
              source={this.state.color1}
              style={styles.icon2}
            >

请检查

当我从状态调用源时 ImageBackground 不工作

ImageBackground not working when i call source from state

react-native

touchableopacity

imagebackground