(8)-列表视图
最后更新于：2022-04-01 06:50:03
> [ListView](http://facebook.github.io/react-native/docs/listview.html)
## 属性
| 名称 | 类型 | 意义 | 默认值 |
| --- | --- | --- | --- |
| 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