リストビューの交互の行が反応します

Question

リストビューで別の色を表示しようとしていますが、それは起こっていません。インターネットでさまざまなオプションを調べて試しましたが、残念ながら成功しませんでした。誰が私が間違っていると私に教えてくれる？

'use strict'; 

    import React, {Component} from 'react' 
    import{ 
    StyleSheet, 
    Image, 
    Navigator, 
    Text, 
    View, 
    ListView, 
}from 'react-native'; 

var menu_drawer_list_item = [{title:'Deluxe Room', description:'Double bed, TV, AC, Wi-Fi...', image:require('../icons/images/rest.jpg')}, 
         {title:'Premier Room', description:'Double bed, TV, AC, Wi-Fi...', image:require('../icons/images/rest.jpg')}, 
         {title:'Suite Room', description:'Double bed, TV, AC, Wi-Fi...', image:require('../icons/images/rest.jpg')},]; 

class Room extends Component{ 

    constructor(props){ 
    super(props); 
    this.state = { 
    dataSource: new ListView.DataSource({ 
     rowHasChanged : (row1,row2) => row1!=row2 
    }) 
}; 
} 

render(){ 
    return(
    <ListView 
     dataSource={this.state.dataSource} 
     renderRow={(item, rowID) => this._renderMenuItem(item, rowID)} /> 
); 
} 

componentDidMount() { 
    this.setState({ 
     dataSource: this.state.dataSource.cloneWithRows(menu_drawer_list_item) 
    }); 
} 

    _renderMenuItem(item, rowID) { 
console.log("Row Id....."+rowID); 
    if(rowID % 2 == 0){ 
     return(
     <View style ={{flexDirection:'row', height:150, backgroundColor:'red'}}> 
      <View style={{padding:2.5}}> 
      <Image style={{width:150, height:110, borderRadius:5}} source ={item.image}></Image> 
      </View> 
      <View style={{marginTop:15, marginLeft:10}}> 
      <Text style={{fontSize:20}}>{item.title}</Text> 
      <Text style={{fontSize:20}}>{item.description}</Text> 
      <Text style={{fontSize:18, backgroundColor:'green', width:150, marginTop:10, height:22, color:'white'}}>CHECK AVAILABILTY</Text> 
      </View> 
     </View> 
    ); 
    }else{ 
     return(
     <View style ={{flexDirection:'row', height:150, backgroundColor:'blue'}}> 
      <View style={{padding:2.5}}> 
      <Image style={{width:150, height:110, borderRadius:5}} source ={item.image}></Image> 
      </View> 
      <View style={{marginTop:15, marginLeft:10}}> 
      <Text style={{fontSize:20}}>{item.title}</Text> 
      <Text style={{fontSize:20}}>{item.description}</Text> 
      <Text style={{fontSize:18, backgroundColor:'green', width:150, marginTop:10, height:22, color:'white'}}>CHECK AVAILABILTY</Text> 
      </View> 
     </View> 
    ); 
    } 
} 

} 

module.exports = Room; 

そして私は...アンドロイドスタジオモニターに

06-29 15:01:40.268 27584-5131/com.demoreactapp I/ReactNativeJS: Row Id.....s1 
06-29 15:01:40.312 27584-5131/com.demoreactapp I/ReactNativeJS: Row Id.....s1 
06-29 15:01:40.351 27584-5131/com.demoreactapp I/ReactNativeJS: Row Id.....s1 

をこのような値を取得しています誰もがこの上で私を助けてくださいことはできますか？

Answer 1

あなたはほとんど正しいですが、renderRowに渡される2番目の引数はセクションIDです。行IDは3番目の引数です。

だから、このようなことにあなたのrender方法変更http://facebook.github.io/react-native/docs/listview.html#renderrow

を参照してください：lot.Itは私の問題を解決するために私を助け

render() { 
    return (
     <ListView 
     dataSource={this.state.dataSource} 
     renderRow={(item, sectionID, rowID) => this._renderMenuItem(item, rowID)} 
     /> 
    ); 
}