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;