React native 按react native时更改图像

我现在有黄道带的黑白图像，当我点击它们时，我设法得到了黄道带的彩色图像。问题是，直到我再次按下它，状态才会改变。我只想显示被点击的实际符号。我怎么做？以下是我管理图像更改的代码：

        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>
)}

状态={
贝利尔：错，
平衡：错，
癌症：错，
摩羯座：错，
杰莫：错，
狮子：错，
泊松：错，
射手座：错，
蝎子：错，
陶罗：错，
维索：错，
维尔热：错
}
render（）{
返回(
{this.setState（{belier:！this.state.belier}）；{this.showBelier（）}>
)}

---

谢谢

很简单，在文件顶部需要两张图像

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>
  )
}

someFunc（）{
if（this.state.belier）{
返回(
)
}否则{
返回(
)
}
}
//然后在渲染函数中
render（）{
返回(
{this.someFunc（）}
)
}

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

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>
  )
}

render（）{
返回(
this.setState（{belier:！this.state.belier}）}>
{this.state.belier&&
}
{！这个州，贝利尔&&
}
)
}

是的，这允许我将一个图像更改为另一个图像，但我有12个黑白图像，每次单击时我只想将一个图像更改为彩色图像。当我点击下一个按钮时，它现在将以彩色显示这一个，而另一个将再次以黑白显示。就是这一部分，我无法做到。你有没有尝试过这些图像，在其中你可以返回一个可切换的图像？没有，我没有尝试映射。所以我需要制作一个图像数组？正确吗？我是一个新的开发人员，所以这不是立即为我