反応したネイティブで交互に表示されるリストビュー

Question

私は以下の例のようなオブジェクトの配列を持っています。

[{ 
     "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 
    } 
] 

各項目の色が交互になるようにリストビューを表示することはできますか？

Answer 1

：私は、行のRenderメソッドを実施例にhere

を設定した

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

あなたは簡単にそれぞれにspecail色を追加することができますこの方法をリスト内の行（偶数/奇数型だけでなく）

Answer 2

でrenderRowではい、ROWIDまたはrowDataに基づいて別のスタイルを適用するなど

例：

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

Answer 3

あなたがでrenderRow機能で提供ROWIDを使用することができます。私はこのアプローチはきれいだと思い

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