ReactNative ListView 组件

ReactNative ListView 组件

import React, {Component} from 'react';
import {
    AppRegistry,
    StyleSheet,
    Text,
    View,
    ScrollView,
    RefreshControl,
    ListView,
} from 'react-native';

/**
 * ListView 数据列表
 * listView 是最用的设置每行显示的组件
 * section,header
 *
 * 使用ListView。DataSource,给他传递一个普通的数组数据，
 * 在使用dataSource对象实例化一个listView组件
 * listView实现：row/section组件定义、设置数组
 *
 * 设置ListView数据源：
 * state(数据源是不断变化的) 需要将dataSource对象设置为state属性
 */

//原始数据 数组（字符串）
let contents = [
    "1",
    "2",
    "3",
    "4",
    "5",
    "6",
    "7",
    "8",
    "9"
];

let MyListView = React.createClass({
    getInitialState: function () {
        //创建dataSource对象
        let ds = new ListView.DataSource({
            rowHasChanged: (oldRow, newRow) => oldRow !== newRow
        });

        return {
            //设置dataSource时，不直接使用原始数据，使用cloneWithRows对数据源进行复制
            //使用复制后的数据源实例化ListView.
            // 优势：当数据源发生变化时，ListView组件的dataSource不会改变
            dataSource: ds.cloneWithRows(contents)
        };
    },
    //渲染呢row组件，参数是每行要显示的数据对象
    _renderRow: function (rowDate: string) {
        return (
            <View style={styles.row}>
                <Text style={styles.content}>{rowDate}</Text>
            </View>
        );
    },
    render: function () {
        return (
            <ListView
                style={styles.container}
                dataSource={this.state.dataSource}
                renderRow={this._renderRow}
                // initialListSize=""
                // onEndReachedThreshold=""
                // pageSize=""
                // renderScrollComponent=""
                // scrollRenderAheadDistance=""
                // stickyHeaderIndices=""
            />
        );

    }
});
let styles = StyleSheet.create({
    container: {
        flex: 1,
        marginTop: 25
    },
    row: {
        justifyContent: "center",
        alignItems: "center",
        padding: 5,
        height: 100,
        borderBottomWidth: 1,
        borderColor: "#ccc"

    },
    content: {
        flex: 1,
        fontSize: 20,
        color: "blue"
    }
});

module.exports = MyListView;