基本的ListView组件

base_listview

/**
 * 基本的listiew
 * sherlock221b
 */


'use strict';

var React = require('react-native');
var {
    AppRegistry,
    StyleSheet,
    Text,
    View,
    Image,
    ListView,
    NavigatorIOS,
    TextInput,
    TouchableHighlight
    } = React;

var uk = React.createClass({
    getInitialState: function() {
        var ds = new ListView.DataSource({rowHasChanged: (r1, r2) => r1 !== r2});
        return {
            dataSource: ds.cloneWithRows([{"name" : "小明","age":10}, {"name" : "小红","age":30}])
        };
    },

    renderRow : function(rowData, sectionID, rowID){
        return (
            <View style={css.row}>
                <Text style={css.text}>{rowData.name}</Text>
                <Text  style={css.text}>{rowData.age}</Text>
            </View>
        );
    },
    render: function() {
        return (
            <ListView  style={css.container} dataSource={this.state.dataSource}
                       renderRow={this.renderRow.bind(this)}/>
        );
    }
});

var css = StyleSheet.create({
    container: {
        marginTop : 35,
        padding : 20
    },

    row : {
        flexDirection : "row",
        paddingBottom : 10,
        borderBottomWidth : 1,
        borderColor : '#ccc',
        marginBottom : 10
    },
    text : {
        flex : 1
    }


});

AppRegistry.registerComponent('uk', () => uk);