Reactjs 列表视图中的备用行

我正在尝试在列表视图中显示其他颜色，但没有实现。我已经研究并尝试了互联网上的各种选项，但不幸的是，我没有获得成功。谁能告诉我哪里错了

    '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;

---

有人能帮我一下吗？？？

你说得差不多对了，但是传递给

renderRow

的第二个参数是节ID。行ID是第三个参数

看

因此，将您的

render

方法更改为如下：

render（）{
返回(
此.\u renderNuItem（item，rowID）}
/>
);
}

您的回答几乎正确，但传递给

renderRow

的第二个参数是节ID。行ID是第三个参数

看

因此，将您的

render

方法更改为如下：

render（）{
返回(
此.\u renderNuItem（item，rowID）}
/>
);
}

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