react-native - 当我从状态调用源时，ImageBackground 不起作用

Question

当我从状态调用源时，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}
            >

请检查