ReactNative 进阶（四十）：应用 ListView 实现分组列表

/** * Sample React Native App * https://github.com/facebook/react-native * @flow */
import React, {Component} from 'react';import {  AppRegistry,  StyleSheet,  Text,  View,  Image,  ListView,  TouchableOpacity,  AlertIOS,} from 'react-native';
var Dimensions = require('Dimensions');var {width, height} = Dimensions.get('window');// 引入数据文件var models = require("./Wine.json");
var listViewTest = React.createClass({
  /**   * 生命周期,不可更改的属性在这里   * @returns {{}}   */  getDefaultProps() {    return {}  },  /**   * 生命周期,状态机在这里   * @returns {{}}   */  getInitialState() {    // 创建数据源   rowHasChanged方法决定了ListView是否重新渲染当前这一行    var ds = new ListView.DataSource({      rowHasChanged: (r1, r2) => {        r1 !== r2      }    });    return {      // 数据源中的数据      dataSource: ds.cloneWithRows(models)    }  },  /**   * 生命周期,复杂的操作在这里   */  componentDidMount() {
  },  /**   * 生命周期,渲染   * @returns {XML}   */  render() {    return (      <ListView        dataSource={this.state.dataSource} // 指定数据源        renderRow={this.renderRow} // 渲染每一行      />    );  },  /**   * ListView根据数据源的数据进行渲染   * @param rowData 每一项的数据   * @param sectionID 组号   * @param rowID 行号   * @param highlightRow   * @returns {XML}   */  renderRow(rowData, sectionID, rowID, highlightRow) {    return (      <TouchableOpacity         activeOpacity={0.7}         onPress={() => this.cellDidClick(rowID, rowData)}      >        <View style={styles.wineCell}>          <Image style={styles.icon} source={{uri: rowData.image}}/>          <View style={styles.titleContainer}>            <Text style={styles.title}>{rowData.name}</Text>            <Text style={styles.subTitle}>${rowData.money}</Text>          </View>        </View>      </TouchableOpacity>    );  },
  cellDidClick(rowID, rowData) {    alert("点击了" + rowID + rowData.name);  }});
const styles = StyleSheet.create({  container: {    flex: 1,    justifyContent: 'center',    alignItems: 'center',    backgroundColor: '#F5FCFF',    paddingTop: 20  },  wineCell: {    flexDirection: "row",    borderBottomWidth: 1,    borderBottomColor: '#eee',    paddingLeft: 10,    paddingTop: 10,    paddingBottom: 10,    backgroundColor: 'white'  },  icon: {    width: 60,    height: 60,  },  titleContainer: {    flexDirection: "column",    justifyContent: 'space-between'  },  title: {    fontSize: 15,    fontWeight: 'bold',    width: width - 60,    paddingLeft: 10,    paddingRight: 10  },  subTitle: {    fontSize: 15,    marginLeft: 10,  }});
AppRegistry.registerComponent('listViewTest', () => listViewTest);