Listview mit wechselnder Farbe in reagieren nativen

Question

Ich habe Array von Objekten wie das Beispiel unten;

[{ 
     "id" : 13100, 
     "key" : "Emlak Vergisi", 
     "y" : 135638.98 
    }, { 
     "id" : 13154, 
     "key" : "Çevre Temizlik ", 
     "y" : 956.17 
    }, { 
     "id" : 19998, 
     "key" : "Genel Tahakkuk", 
     "y" : 89030.62 
    }, { 
     "id" : 24998, 
     "key" : "Gecekondu ve So", 
     "y" : 42721.07 
    }, { 
     "id" : 60000, 
     "key" : "Ortak Gelirler", 
     "y" : 827.42 
    } 
] 

Ist es möglich, einen Listenansicht mit wechselnder Farbe für jedes Element zu haben?

Answer 1

Ich würde sagen, dieser Ansatz ist sauberer:

renderRow(rowData, sectionID, rowID) { 

    let style = [ 
     styles.row, 
     {'backgroundColor': colors[rowID % colors.length]} 
     ]; 

    return (<View style={style}/>); 
} 

let colors = ['#123456', '#654321', '#fdecba', '#abcdef']; 

let styles = StyleSheet.create({ 
     row: { 
      // .. rows style 
     } 
}); 

Auf diese Weise können Sie eine specail Farbe zu jeder leicht hinzufügen Ich habe ein funktionierendes Beispiel here

Render Reihe Verfahren einrichten Zeile in der Liste (nicht nur durch geraden/ungeraden Typ)

Answer 2

Ja in renderRow, wenden Sie einen anderen Stil basierend auf rowID oder rowData etc

Ex:

renderRow(rowData, sectionID, rowID, highlightRow) { 
    if(rowID%2 === 0) { 
     return (<View style={{backgroundColor: 'blue'}}/>); 
    } 
    return (<View style={{backgroundColor: 'red'}}/>); 
} 

Answer 3

Sie können die rowID in der renderRow Funktion vorgesehen verwenden.

renderRow = (rowData, sectionId, rowId) => { 
    if (rowId % 2) { 
     return (
     <View style={{backgroundColor: 'red'}}> 
      <Text>{rowData.id}</Text> 
     </View> 
    ); 
    } else { 
     return (
     <View style={{backgroundColor: 'blue'}}> 
      <Text>{rowData.id}</Text> 
     </View> 
    ); 
    } 
    }; 

Answer 4

(Provided Array).map((array, index) => { 
     return (
      <View style={{ backgroundColor: (index % 2 == 0) ? '#ecf0f1' : '#fff' }}> 
       <Text>{array.key}</Text> 
      </View> 
     ) 
    })