关于ListView下拉加载的问题



  • var React = require('react-native');

    var {
    Image,
    Text,
    StyleSheet,
    View,
    ListView,
    AppRegistry
    } = React;
    var Index = 1;
    var REQUEST_URL="http://gank.io/api/data/福利/10/"+Index;
    var DATA=[];
    var assembly = React.createClass({
    getInitialState: function() {
    return {
    dataSource: new ListView.DataSource({
    rowHasChanged: (row1, row2) => row1 !== row2}),
    loaded: false
    };
    },
    componentDidMount: function() {
    this.fetchData();
    },
    fetchData:function(){
    fetch(REQUEST_URL)
    .then((response) => response.json())
    .then((responseData) => {
    this.setState({
    dataSource:this.state.dataSource.cloneWithRows(responseData.results),
    loaded:true
    });
    DATA.push(responseData.results);

          })
        .done();
    

    },
    //渲染组件
    render: function() {
    //
    if (!this.state.loaded) {
    return this.renderLoadingView();
    }
    return this.renderListView();
    },

    //渲染loading
    renderLoadingView:function() {
    return (
    <View style = {styles.container}>
    <Text>Loading...</Text>
    </View>
    );
    },

    //渲染img
    renderMovie:function(rowData) {
    return (
    <View style={styles.containerImg}>
    <Image style={styles.meizhiImage} source={{url:rowData.url}}></Image>
    <Text style={styles.imageNAME}>{rowData.who}</Text>
    </View>
    );
    },
    //下拉加载
    drowDowning:function(){
    Index++;
    fetch(REQUEST_URL)
    .then((response) => response.json())
    .then((responseData) => {
    DATA.push(responseData.results);
    this.setState({
    dataSource:DATA
    });
    })
    },
    //渲染ListView
    renderListView:function(){
    return (
    <ListView
    dataSource={this.state.dataSource}
    renderRow={this.renderMovie}
    style={styles.listView}
    onEndReached ={this.drowDowning}
    onEndReachedThreshold ={200}
    />
    );
    }

    });

    var styles = StyleSheet.create({
    containerImg:{
    width:300,
    height:420,
    backgroundColor:'white',
    borderRadius:5,
    marginTop:30,
    alignSelf:'center'
    },
    meizhiImage:{
    width:280,
    height:400,
    marginTop:10,
    marginLeft:10,
    borderWidth:0.5,
    borderColor:'black'
    },
    listView:{
    backgroundColor:'rgb(51,143,255)'
    },
    imageNAME:{
    alignSelf:'flex-end',
    justifyContent:'flex-end'
    }
    });
    AppRegistry.registerComponent('assembly', () => assembly);

    这是我的代码0_1460537328085_QQ图片20160413164711.png



  • 此回复已被删除!

登录后回复