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;