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;

我在android studio monitor中获得了这样的价值......

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的第二个参数是部分ID。行ID是第三个参数。

请参阅http://facebook.github.io/react-native/docs/listview.html#renderrow

因此，将render方法更改为：

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

列表视图中的备用行反应原生

1 个答案: