React-Native ListView简单使用

/** * Created by Administrator on 2016/8/30. */import React, {Component} from 'react';import {    AppRegistry,    StyleSheet,    Text,    View,    ListView,} from 'react-native';class ListViewG extends Component {    /**     * 初始化数据     * @param props     */    constructor(props) {        super(props);        //基本都是些固定写法        //第一步        var ds = new ListView.DataSource({rowHasChanged: ((r1, r2) => r1 !== r2)});        this.state = {            //数据源            //第二步            dataSource: ds.cloneWithRows([                'Android', 'IOS', 'React-Native', 'H5', 'JAVA', 'OC', 'Go', 'Swift', 'C', 'C++', 'C#', 'Python', 'PHP'            ])        }    }    render() {        return (            <View style={{paddingTop: 20, flex: 1}}>                <ListView                    //第三步 设置数据源                    dataSource={this.state.dataSource}                    // 写法一                    // renderRow={(rowData) => <Text style={{height: 150, fontSize: 20}}>测试数据{rowData}</Text>}                    //写法二                    //第四步渲染每行数据也就是对每行数据的布局样式                    renderRow={this.renderRow}                />            </View>        )    }    /**     *     * @param rowData       数据源     * @param sectionID     组ID     * @param rowID         行ID     * @returns {XML}     */    renderRow(rowData, sectionID, rowID) {        return (            <Text style={styles.row}>测试数据{rowData + '\n组ID' + sectionID + '\n行ID' + rowID}            </Text>        )    }}const styles = StyleSheet.create({    row: {        height: 80,        fontSize: 20,        //布局优化当写此属性时只会加载屏幕能看到数据        overflow: 'hidden'    }});module.exports = ListViewG;