react-native試玩(8)-列表視圖

來源:互聯網
上載者:User

標籤:

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

相關文章

聯繫我們

該頁面正文內容均來源於網絡整理,並不代表阿里雲官方的觀點,該頁面所提到的產品和服務也與阿里云無關,如果該頁面內容對您造成了困擾,歡迎寫郵件給我們,收到郵件我們將在5個工作日內處理。

如果您發現本社區中有涉嫌抄襲的內容,歡迎發送郵件至: info-contact@alibabacloud.com 進行舉報並提供相關證據,工作人員會在 5 個工作天內聯絡您,一經查實,本站將立刻刪除涉嫌侵權內容。

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.