Question

如何选择文本颜色？我已经尝试过使用状态，但是它正在更改所有文本。这是我的代码：

  constructor(props) {
    super(props)

    this.state = {
      textStyle: {
        color:""
      },
      selectedText:"",
      selectedIndex:0,
      tabList:[
        {id:0,label:'Bélier', active:require('../Images/couleurs/icons8-belier-100.png'), inactive:require('../Images/gris/beliergris.png')},
        {id:1,label:'Taureau', active:require('../Images/couleurs/icons8-taureau-96.png'), inactive:require('../Images/gris/taureaugris.png')},
        {id:2,label:'Gémeaux', active:require('../Images/couleurs/icons8-gemeaux-96.png'), inactive:require('../Images/gris/gemeauxgris.png')},
        {id:3,label:'Cancer', active:require('../Images/couleurs/icons8-cancer-96.png'), inactive:require('../Images/gris/cancergris.png')},
        {id:4,label:'  Lion', active:require('../Images/couleurs/icons8-lion-96.png'), inactive:require('../Images/gris/liongris.png')},
        {id:5,label:'Vierge', active:require('../Images/couleurs/icons8-vierge-96.png'), inactive:require('../Images/gris/viergegris.png')},
        {id:6,label:'Balance', active:require('../Images/couleurs/icons8-balance-96.png'), inactive:require('../Images/gris/balancegris.png')},
        {id:7,label:'Scorpion', active:require('../Images/couleurs/icons8-scorpion-96.png'), inactive:require('../Images/gris/scorpiongris.png')},
        {id:8,label:'Sagittaire', active:require('../Images/couleurs/icons8-sagittaire-96.png'), inactive:require('../Images/gris/sagittairegris.png')},
        {id:9,label:'Verseau', active:require('../Images/couleurs/icons8-verseau-96.png'), inactive:require('../Images/gris/verseaugris.png')},
        {id:10,label:'Capricorne', active:require('../Images/couleurs/icons8-capricorne-96.png'), inactive:require('../Images/gris/capricornegris.png')},
        {id:11,label:'Poissons', active:require('../Images/couleurs/icons8-poissons-96.png'), inactive:require('../Images/gris/poissonsgris.png')}        
      ],
    }

changeColor(){
    if(this.state.textStyle){
      this.setState({color:"#81EA82"})
    } else {
      this.setState({color:"#ABABAB"})
    }
  }

<View style={styles.main_container}>
  <View style = {{height: 'auto', display: 'flex', flexDirection: 'row', flexWrap: 'wrap',  justifyContent: 'space-between'}}>
     {
       this.state.tabList.map((item,index)=>{
       return(
         <TouchableOpacity style = {{display: 'flex', width: '16.6%', marginBottom: 10, marginTop: 10, flexDirection: 'column', justifyContent:'center', alignItems:'center'}} 
          key = {item.id} onPressIn={()=>{this.setState({selectedIndex:index, selectedText:item.label})}} 
          onPress={() => this._fetchPlaylist()}>
          <Image
             style = {styles.image}
             source={this.state.selectedIndex==index ? item.active:item.inactive}/>

          <Text onPres = {this.textStylen } style = {{ textAlign:"center", fontSize: 10, color: this.state.selectedIndex == item.label? "#81EA82" : "#ABABAB"}}>
            {item.label}
          </Text>          
        </TouchableOpacity>
       )
   })
 }
</View>

因此，我想在单击item.label时进行更改。 item.label与图像链接。我想我很接近状态响应，但是我不知道如何在这里使用它。有人有主意吗？

谢谢

Answer 1

我猜问题出在您的<Text>风格if语句中，应该改为this.state.selectedIndex == index。

我已根据您的代码修改了解决方案：

this.state.tabList.map((item,index)=> {
    return(
         <TouchableOpacity style = {{display: 'flex', width: '16.6%', marginBottom: 10, marginTop: 10, flexDirection: 'column', justifyContent:'center', alignItems:'center'}} 
          key = {item.id} onPressIn={()=>{this.setState({selectedIndex:index, selectedText:item.label})}} 
          onPress={() => this._fetchPlaylist()}>
          <Image
             style = {styles.image}
             source={this.state.selectedIndex==index ? item.active:item.inactive}/>

          <Text style = {{ textAlign:"center", fontSize: 10, color: this.state.selectedIndex == index? "#81EA82" : "#ABABAB"}}>
            {item.label}
          </Text>          
        </TouchableOpacity>
    )
}

Answer 2

您使用的条件不正确

请使用

this.state.selectedIndex === index ? "#81EA82" : "#ABABAB"

代替

this.state.selectedIndex === item.label? "#81EA82" : "#ABABAB"

注意：使用selectedId代替索引的最佳做法。

Answer 3

尝试一下：

 <Text
      onPress={() =>this.setState({selectedIndex:index})}
      style={[{
        textAlign: "center",
        fontSize: 10,                    
      },
    this.state.selectedIndex==index ?{color:"red"}:{color:"blue"}
    ]}
    >
      {item.label}
 </Text>

更改在本机中选择的文本的颜色

3 个答案: