如何更改通過循環呈現的按鈕上按鈕的設計（例如顏色）？

Question

嘿，大家可以有人幫我解決這個問題。我的問題與改進應用程序的用戶體驗有關。我已經通過一個循環呈現手風琴，它使用一個按鈕呈現數據。我想改變按下的按鈕的顏色，從而幫助用戶體驗。但隨着所有按鈕都在變色，都會遇到問題。問題是我從狀態渲染顏色任何人都可以幫助我解決一些不同的問題。

這是遍歷對此我渲染手風琴：

{this.state.services.map((tab, i) => { 
      return(
       <ScrollView key={i} tabLabel={tab.category} style={{flex: 1}}> 
       {tab.names.map((name, j) => this.renderRow(name))} 
       </ScrollView> 
      ) 
      })} 

這是渲染功能：

renderRow (rowData) { 
 
    var header = (
 
     rowData.subGroup.length > 1 ? <View> 
 
     <Text>{rowData.name}</Text> 
 
     </View> 
 
     : 
 
     <View> 
 
     <View style={{flex: 1}}> 
 
      <Text>{rowData.name}</Text> 
 
      <Text>{rowData.subGroup[0].duration}Min</Text> 
 
     </View> 
 
     <Text>₹{rowData.subGroup[0].price.M ? rowData.subGroup[0].price.M : rowData.subGroup[0].price.F}</Text> 
 
     <TouchableOpacity onPress={() => this._add(rowData.subGroup[0])}> 
 
      <View style={styles.buttonView}> 
 
      <Text style={styles.buttonText}>ADD</Text> 
 
      </View> 
 
     </TouchableOpacity> 
 
     </View> 
 

 
    ); 
 

 
    var content = (
 
     <View style={{flex: 1}}> 
 
     {rowData.subGroup.map((sg, i) => { 
 

 
      return(
 
       sg.subGroup ? <View> 
 
        <View style={{flex: 1}}> 
 
        <Text>{sg.subGroup ? sg.subGroup : sg.name}</Text> 
 
        <Text>{sg.duration}Min</Text> 
 
        </View> 
 
        <Text style={styles.price}>₹{sg.price.M ? sg.price.M : sg.price.F}</Text> 
 
        <TouchableOpacity onPress={() => this._add(sg)}> 
 
        <View style={styles.buttonView}> 
 
         <Text style={styles.buttonText}>ADD</Text> 
 
        </View> 
 
        </TouchableOpacity> 
 
       </View> 
 
       : 
 
       <View></View> 
 
      ) 
 

 
     })} 
 
     </View> 
 
    ); 
 

 
    return (
 
     <Accordion 
 
     key={rowData.name} 
 
     header={header} 
 
     content={content} 
 
     easing="easeOutCubic" 
 
     /> 
 
    ); 
 
    }

有誰能夠引導我通過不同的方法？

Answer 1

夥計們，我發現解決方案只是寫了一個簡單的函數並返回true或false。根據返回值和三元運營商i的改變所選值

這裏的風格是一個解決方案：

<View style={this._toggleServiceButtonView(sg) ? styles.removeView : styles.buttonView}> 
    <Text style={this._toggleServiceButtonView(sg) ? styles.removeText : styles.buttonText}> 
     {this._toggleServiceButtonView(sg) ? 'REMOVE' : 'ADD'} 
    </Text> 
    </View> 

這是在我只是檢查功能如果選定的值在車陣回真正。

_toggleServiceButtonView(data) { 
    return this.state.cartArr.length != 0 && this.state.cartArr.findIndex((service) => { 
     if(service.service._id === data._id){ 
     return true; 
     } else { 
     return false; 
     } 
    }) !== -1 
    }