루프를 통해 렌더링되는 프레스 버튼의 디자인 (예 : 색상)을 변경하는 방법은 무엇입니까?

Question

안녕 얘들 아 누구나이 문제를 해결할 수 있습니다. 내 문제는 응용 프로그램의 UX를 향상시키는 것과 관련이 있습니다. 나는 아코디언을 단추로 데이터를 렌더링하는 루프를 통해 렌더링했습니다. UX에서 도움이되는 버튼의 색상을 변경하고 싶었습니다. 그러나 모든 버튼이 자신의 색을 돌리고 있기 때문에 문제가 발생했습니다. 문제는 내가 상태에서 색상을 렌더링 오전 누구나 다른 솔루션을 좀 도와 수 있습니다.

{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를 반환했습니다. 상기 선택된 값을 반환하는 쇼핑 카트 어레이에있는 경우 여기

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