Question

我目前有十二生肖的黑白图像，当我单击它们时，我设法获得了十二生肖的彩色图像。问题是，直到我再次按下它，状态才会改变。我只想显示单击的实际符号。我该怎么做？这是我管理图像更改的代码：

        state = {
            belier:false,
            balance:false,
            cancer:false,
            capricorne:false,
            gemeaux:false,
            lion:false,
            poissons:false,
            sagittaire:false,
            scorpion:false,
            taureau:false,
            verseau:false,
            vierge:false
          }

          render() {
            return (
              <View style = {{flexDirection: 'row', justifyContent:'space-between', position:'relative'}}>
                <TouchableOpacity onPress={() => {this.setState({belier: !this.state.belier});{this.showBelier()}}}>
                  <Image style = {styles.image} source={ this.state.belier === true ? require("../Images/couleurs/icons8-belier-100.png")
                : require("../Images/gris/beliergris.png")}/>
                </TouchableOpacity>
              </View>
)}

谢谢

Answer 1

这很简单，在文件顶部需要两个图像。

const image_one = require("../Images/couleurs/icons8-belier-100.png");
const image_two = require("../Images/gris/beliergris.png");

然后，您可以用多种方式渲染它。例如，通过一个函数：

someFunc() {
  if(this.state.belier) {
    return (
      <Image style={styles.image} source={image_one} />
    )
  } else {
    return (
      <Image style={styles.image} source={image_two} />
    )
  }
}

// Then in your render function

render() {
  return (
    <View>
    {this.someFunc()}
    </View>
  )
}

您也可以使用条件渲染来内联渲染，如下所示：

render() {
  return (
    <View>
      <TouchableOpacity 
        onPress={() => this.setState({belier: !this.state.belier})}>
        { this.state.belier &&
         <Image style={styles.image} source={image_one} />
        }
        { !this.state.belier &&
         <Image style={styles.image} source={image_two} />
        }
      </TouchableOpacity>
    </View>
  )
}

按下反应本机时更改图像

1 个答案: