react-native 下拉刷新

react-native-refresh

/**
 * 下拉刷新listiew
 * sherlock221b
 */


'use strict';

var React = require('react-native');
var RefreshableListView = require("react-native-refreshable-listview");


var {
    AppRegistry,
    StyleSheet,
    Text,
    View,
    Image,
    ListView,
    NavigatorIOS,
    TextInput,
    } = 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},
                {"name" : "小红","age":30},
                {"name" : "小红","age":30},
                {"name" : "小红","age":30},
                {"name" : "小红","age":30},
                {"name" : "小红","age":30},
                {"name" : "小红","age":30},
                {"name" : "小红","age":30},
                {"name" : "小红","age":30},
                {"name" : "小红","age":30},
                {"name" : "小红","age":30},
                {"name" : "小红","age":30}
            ])
        };
    },
    renderHeaderWrapper(refreshingIndicator) {
        return (
            <View>
                <Text>My custom header</Text>
                {/*  you MUST render the refreshingIndicator (which is passed in as the first argument) */}
                {refreshingIndicator}
            </View>
        )
    },
    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 (
            <View>
            <View style={css.container}>
                <RefreshableListView
                    dataSource ={this.state.dataSource}
                    renderRow = {this.renderRow}
                    loadData = {this.renderRow}
                    refreshDescription=""

                    />

            </View>

            </View>


        );
    }
});

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

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


});

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

使用 https://github.com/jsdf/react-native-refreshable-listview 的插件进行制作