react-native - 更改 react-native 中所选文本的颜色

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图像链接。我想我已经接近状态的响应，但我不知道如何在这里使用它。有人有想法吗？

谢谢

标签： react-native

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