ReactNative新手学习之路06滚动更新ListView数据的小示例

本节带领大家学习使用ListView 做一个常用的滚动更新数据示例：

知识点：

1. initialListSize={200} 第一次加载多少数据行
2. onEndReached={this.onEndReached} listview不能有flexDirection: 'row',
   onEndReachedThreshold像素时候执行该方法   定义方法必须onEndReached:function(){}  其他都会造成异常加载
3. pageSize={200}每次循环加载数据条数
4. onEndReachedThreshold={500} 配合onEndReached 到达底部多少像素开始加载
5. removeClippedSubviews={false} //安卓下开启有bug
6. scrollRenderAheadDistance={500} //滚动底部多少像素开始加载数据
7. dataCache 存储数据实现保存历史数据
8. dataCache=dataCache.concat(dataBlob); concat() 方法用于连接两个或多个数组
   代码如下：

    'use strict';/*下拉更新ListView数据的小示例 知识点
    *
    initialListSize={200} 第一次加载数据行
    onEndReached={this.onEndReached}
    onEndReachedThreshold像素时候执行该方法
    pageSize={200}每次循环加载数据条数
    onEndReachedThreshold={500} 配合onEndReached 到达底部多少像素开始加载
    removeClippedSubviews={false} //安卓下开启有bug
    scrollRenderAheadDistance={500} //滚动底部多少像素开始加载数据
    dataCache 存储数据实现保存历史数据
    dataCache=dataCache.concat(dataBlob); concat() 方法用于连接两个或多个数组
    */
    var React = require('react-native');
    var {
    AppRegistry,
    StyleSheet,
    Text,
    View,
    Image,
    ListView,} = React;
    //缓存数据
    var dataCache = {
    dataCache: '',
    };var MListView = React.createClass({_renderRow:function(rowData: string, sectionID: number, rowID: number) {
    return (
   
    <View style={{flex:1, margin:5}}>
   
    <Text>
    {rowData}
    </Text>
   
    </View>
    );
    },
    _genRows: function(){
    var dataBlob = [];
    for (var ii = 0; ii < 1000; ii++) {
   
    dataBlob.push('Row ' + ii );
    }
    return dataBlob;
    },
    getInitialState: function() {
    dataCache=this._genRows({});//缓存数据
    var ds = new ListView.DataSource({rowHasChanged: (r1, r2) => r1 !== r2});
    return {
    dataSource: ds.cloneWithRows(dataCache),
    };
    },
   
    onEndReached:function(){
   
    console.log('endreached');
    var dataBlob = [];
    for (var ii = 2000; ii < 3000; ii++) {
    dataBlob.push('Row ' + ii );
    }
    dataCache=dataCache.concat(dataBlob);
    this.setState({
   
    dataSource:this.state.dataSource.cloneWithRows(dataCache),
    });
   
    },
    render: function() {
    return (
    <View style={styles.flex}>
    <ListView dataSource={this.state.dataSource}
    renderRow={this._renderRow}
    initialListSize={200}
    onEndReached={this.onEndReached}
    pageSize={200}
    onEndReachedThreshold={500}
    removeClippedSubviews={false}
    scrollRenderAheadDistance={500} />
    </View>
    );
    }
    })
    const styles = StyleSheet.create({
    flex:{
    flex:1,
   
    },
   
    });
   
    module.exports = MListView;

   希望能帮你解决问题。
   React Native 技术交流群127482131,欢迎大家一起来学习RN。

   1. 转载请保留文章链接 http://www.reactnative.pw/

      每天进步一点点