標籤:
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)-列表視圖