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