LIstHomes.js

'use strict';
import React, {Component} from 'react';
import{
  Alert,
  Image,
  ListView,
  TouchableHighlight,
  StyleSheet,
  Text,
  View,
  AsyncStorage,
  RecyclerViewBackedScrollView
}from 'react-native';
import Dimensions from 'Dimensions';
var { connect } = require('react-redux');


export default class ListHomes extends Component{

  constructor(props) {
    super(props);
    var ds = new ListView.DataSource({rowHasChanged: (r1, r2) => {return true; }});
    this.state = {
       isDataReady: false,
       dataSource: {} ,
    };
    this._renderRow = this._renderRow.bind(this);
    this._genRows = this._genRows.bind(this);
    this.state.dataSource = ds.cloneWithRows(this._genRows({}));

  }
  

  componentWillMount() {
    
  }
  componentDidMount() {
    
  }


  render() {
    return (
      <ListView
          dataSource={this.state.dataSource}
          renderRow={this._renderRow}
          renderScrollComponent={props => <RecyclerViewBackedScrollView {...props} />}
          renderSeparator={this._renderSeperator}
        />
    );
  }

  _renderSeperator(sectionID: number, rowID: number, adjacentRowHighlighted: bool) {
      return (
        <View
          key={`${sectionID}-${rowID}`}
          style={{
            height: adjacentRowHighlighted ? 4 : 1,
            backgroundColor: adjacentRowHighlighted ? '#3B5998' : '#CCCCCC',
          }}
        />
      );
    }


  _renderRow(rowData , sectionID: number, rowID: number) {
    return (
      <TouchableHighlight onPress={() => this._pressRow(rowID)} underlayColor="transparent">

        <View style={styles.row}>
            
            <View style={{flex:2}}>
              <Text style={{textAlign:'left',padding:5}}>
                Ten  : {rowData.name}
              </Text>
            </View>

          </View>

      </TouchableHighlight>
    );
  }

  _genRows(pressData: {[key: number]: boolean}): Array<any> {
      var dataBlob = [];
      for (var ii = 0; ii < 10; ii++) {
          var temp = {
            name: 'abc',
          }
          dataBlob.push(temp);
      }
      return dataBlob;

  }

}

const screenWidth = Dimensions.get('window').width;
const screenHeight = Dimensions.get('window').height;
var styles = StyleSheet.create({
  list: {
    justifyContent: 'space-around',
    //flex: 1,
    flexDirection: 'row',
    flexWrap: 'wrap',
    alignItems: 'flex-start'
  },
  row: {
    flexDirection: 'row',
    justifyContent: 'center',
    padding: 10,
    backgroundColor: '#F6F6F6',

  },
  thumb: {
    flex:1,
  },
  text: {
    flex: 1,
  },
});
function select(store) {
  return {
    routes: store.routes,
    homes : store.homes,
  };
}
module.exports = connect(select)(ListHomes);