Question

我想在按下时更改活动图像。因此，例如，我有两个星座，即摩ri座和金牛座，当用户单击摩Cap座时，图像将呈现彩色，如果用户单击金牛座，则摩ri座标志将为黑白，金牛座将呈现颜色。实际上，我只能使用状态从黑白更改为彩色，但是它将始终呈现彩色图像，我无法打开和关闭它。这是我的代码：

class Horoscope extends React.Component {
  constructor(props) {
    super(props)

    this.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={styles.main_container}>
        <View style = {{height: 150, backgroundColor: '#F5F5F5'}}>
          <View style={{flexDirection:'row', justifyContent: 'space-around', marginVertical: 8 }}>
              <TouchableOpacity onPress={() => {this.setState({belier: !this.state.belier})}}>
                <Image style = {styles.image} source={ this.state.belier === true ? require("../Images/couleurs/icons8-belier-100.png")
                  : require("../Images/gris/beliergris.png")}/>
              </TouchableOpacity>
              <TouchableOpacity onPress={()=> {this.setState({taureau: !this.state.taureau})}}>
                <Image style = {styles.image} source={this.state.taureau === true ? require("../Images/couleurs/icons8-taureau-96.png")
                 : require("../Images/gris/taureaugris.png")}/>
              </TouchableOpacity>
            </View>
          </View>
       </View>
)}

编辑：我也尝试过使用状态clicked，但是当用户单击其他图像时，我仍然不知道如何将其值更改为false。

Answer 1

您可以有一个图像映射器，

const Images = {
  taureau: {
    active: require("../Images/couleurs/icons8-taureau-96.png"),
    inactive: require("../Images/gris/taureaugris.png")
  },
  belier: {
    active: require("../Images/couleurs/icons8-belier-100.png"),
    inactive: require("../Images/gris/taureaugris.png")
  }
};

class Horoscope extends React.Component {
  constructor(props) {
    super(props)

    this.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,
    }
  }
  onPress = var => {
    this.setState(state => ({
      [var]: !this.state[var]
    }));
  }
  getImage = var => {
   const isActive = this.state[var];
   const { active, inactive } = Images[var];
   if(isActive) {
     return active;
   }
   return inactive;
  }
  render() {
    <View style={styles.main_container}>
        <View style = {{height: 150, backgroundColor: '#F5F5F5'}}>
          <View style={{flexDirection:'row', justifyContent: 'space-around', marginVertical: 8 }}>
            <TouchableOpacity onPress={() => { this.onPress('belier') }}>
              <Image source={() => { this.getImage('belier') }}/>
            </TouchableOpacity>
          </View>
        </View>
      </View>
  }
}

Answer 2

因此，我找到了一种使用map()来获得所需内容的方法，但是现在布局存在问题。我有12张图像要渲染，但我只能显示6张。我想在顶部显示6张，在下面显示6张。如果有人需要，下面是代码：

如果有人知道为什么我不能显示我的12张图像，我将不胜感激。（如果我找到它，将进行编辑）。谢谢

class Horoscope extends React.Component {
  constructor(props) {
    super(props)

    this.state = {
      selectedIndex:0,
      selectedIndex2:0,
      belier:false,
      balance:false,
      cancer:false,
      capricorne:false,
      gemeaux:false,
      lion:false,
      poissons:false,
      sagittaire:false,
      scorpion:false,
      taureau:false,
      verseau:false,
      vierge:false,
      tabList:[
        {label:'1', urlActive:require('../Images/couleurs/icons8-belier-100.png'), urlInactive:require('../Images/gris/beliergris.png')},
        {label:'2', urlActive:require('../Images/couleurs/icons8-taureau-96.png'), urlInactive:require('../Images/gris/taureaugris.png')},
        {label:'3', urlActive:require('../Images/couleurs/icons8-gemeaux-96.png'), urlInactive:require('../Images/gris/gemeauxgris.png')},
        {label:'4', urlActive:require('../Images/couleurs/icons8-cancer-96.png'), urlInactive:require('../Images/gris/cancergris.png')},
        {label:'5', urlActive:require('../Images/couleurs/icons8-lion-96.png'), urlInactive:require('../Images/gris/liongris.png')},
        {label:'6', urlActive:require('../Images/couleurs/icons8-vierge-96.png'), urlInactive:require('../Images/gris/viergegris.png')},
       {label:'7', urlActive2:require('../Images/couleurs/icons8-balance-96.png'), urlInactive2:require('../Images/gris/balancegris.png')},
        {label:'8', urlActive2:require('../Images/couleurs/icons8-scorpion-96.png'), urlInactive2:require('../Images/gris/scorpiongris.png')},
        {label:'9', urlActive2:require('../Images/couleurs/icons8-sagittaire-96.png'), urlInactive2:require('../Images/gris/sagittairegris.png')},
        {label:'10', urlActive2:require('../Images/couleurs/icons8-verseau-96.png'), urlInactive2:require('../Images/gris/verseaugris.png')},
        {label:'11', urlActive2:require('../Images/couleurs/icons8-capricorne-96.png'), urlInactive2:require('../Images/gris/capricornegris.png')},
        {label:'12', urlActive2:require('../Images/couleurs/icons8-poissons-96.png'), urlInactive2:require('../Images/gris/poissonsgris.png')}        
      ]
    }
  }

   render() {

    {console.log(this.state.selectedIndex)}

    return (
      <View style={styles.main_container}>


        <View style = {{height: 150, backgroundColor: '#F5F5F5'}}>
          <View style={{flexDirection:'row', justifyContent: 'space-between', flexWrap: 'wrap'}}>
          {
            //loop throught the state
            this.state.tabList.map((item,index)=>{
              return(
                <View>
                  <TouchableOpacity onPress={()=>{this.setState({selectedIndex:index})}}>  
                    <Image
                      style = {styles.image}
                      source={this.state.selectedIndex==index ? item.urlActive:item.urlInactive}/>
                </TouchableOpacity>
                </View>


              )
            })
          }
          </View>  
        </View>
   </View>
 )}
}

编辑：只需使用flexWrap: 'wrap'即可解决它。

更改活动图像本机反应

2 个答案: