码迷,mamicode.com
首页 > 其他好文 > 详细

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

时间:2015-11-21 18:37:20      阅读:480      评论:0      收藏:0      [点我收藏+]

标签:

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

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

标签:

原文地址:http://blog.csdn.net/itfootball/article/details/48245137

踩
(0)
赞
(0)
   
举报
评论 一句话评论(0)
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!