react-native试玩(8)-列表视图

ListView

属性

名称 类型 意义 默认值
dataSource ListViewDataSource 数据集
initialListSize number 设置第一页初始化的元素个数
onChangeVisibleRows function 当有元素的可见性发生改变的时候,该函数会被调用,(visibleRows, changedRows)参数代表了状态可见,状态改变的行,当visible为true时,代表滑入到视图,当visible为false表示滑出视图
onEndReached function 当所有元素展现完或着滑动结束后调用的函数
onEndReachedThreshold number 像素的临界值,该属性和onEndReached配合使用,因为onEndReached滑动结束的标志是以该值作为判断条件的
pageSize number 每一次循环事件显示的行数(暂没理解该意思)
removeClippedSubviews bool 提升性能的一个选项,是一解决溢出的方法,具体做法是隐藏行容器
renderFooter function 渲染底部
renderHeader function 渲染头部
renderRow function 渲染行
renderScrollComponent function 返回一个可滚动的组件
renderSectionHeader function 不祥
renderSeparator function 针对某一特殊元素进行渲染
scrollRenderAheadDistance number 渲染的时间

实例


'use strict';

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

var {
    ListView,
    AppRegistry,
    StyleSheet,
    View,
    Text,
} = React;

var helloworld = React.createClass({
    getInitialState: function() {
    var ds = new ListView.DataSource({rowHasChanged: (r1, r2) => r1 !== r2});
    return {
        dataSource: ds.cloneWithRows(['row 1', 'row 2','row 3','row 4', 'row 5','row 6','row 7', 'row 8','row 9']),
    };
    },

    render: function() {
    return (
        <ListView
        dataSource={this.state.dataSource}
        renderRow={(rowData) => <Text>{rowData}</Text>}
        initialListSize={5}
        pageSize={1}
        scrollRenderAheadDistance={20}
        />
    );
    },
});

var styles = StyleSheet.create({


});

AppRegistry.registerComponent('hellowrold',() => helloworld);

这里写图片描述

Android

适用于Android

发布了581 篇原创文章 · 获赞 235 · 访问量 233万+
展开阅读全文

没有更多推荐了,返回首页

©️2019 CSDN 皮肤主题: 编程工作室 设计师: CSDN官方博客

分享到微信朋友圈

×

扫一扫,手机浏览