简介
ListView - 一个核心组件，用于高效地显示一个可以垂直滚动的变化的数据列表。最基本的使用方式就是创建一个ListView.DataSource数据源，然后给它传递一个普通的数据数组，再使用数据源来实例化一个ListView组件，并且定义它的renderRow回调函数，这个函数会接受数组中的每个数据作为参数，返回一个可渲染的组件（作为listview的每一行）。
基本用法
constructor(props) {
super(props);
var ds = new ListView.DataSource({rowHasChanged: (r1, r2) => r1 !==r2});
this.state = {
dataSource: ds.cloneWithRows(['row 1', 'row 2'])
};
}
render() {
return (
<ListView
dataSource={this.state.dataSource}
renderRow={(rowData) => <Text>{rowData}</Text>}
/>
);
}
换一种写法并添加点击事件
class ListViewSample extends Component {
constructor(props) {
super(props);
var ds = new ListView.DataSource({rowHasChanged: (r1, r2) => r1 !== r2});
this.state = {
dataSource: ds.cloneWithRows(['row 1', 'row 2'])
};
}
render() {
return (
<ListView
dataSource={this.state.dataSource}
renderRow={this._renderRow.bind(this)}
/>
);
}
_renderRow(rowData : string , rowID : number){
return (
<TouchableHighlight onPress={() => this._pressRow(rowData, rowID)}>
<View>
<Text>
{rowData}
</Text>
</View>
</TouchableHighlight>
);
}
_pressRow(url: string, rowID: number){
this._alert(url);
switch (rowID) {
case 0:
break;
case 1:
break;
default:
break;
}
}
_alert(url : string){
AlertIOS.alert(
'提醒',
''+ url,
[{text: 'Cancle', onPress: () => console.log('Foo Pressed!')},
{text: 'OK', onPress: () => console.log('Bar Pressed!')},]
);
}
}
属性
View属性
ScrollView 相关属性样式全部继承
dataSource ListViewDataSource
ListView.DataSource实例（列表依赖的数据源）
initialListSize number
指定在组件刚挂载的时候渲染多少行数据。用这个属性来确保首屏显示合适数量的数据，而不是花费太多帧逐步显示出来。
在ListView标签下添加：
initialListSize = {10}
onEndReachedThreshold
调用onEndReached之前的临界值，单位是像素。
<a>PS:这个值如果不设置会导致onEndReached无法正常使用</a>
pageSize
每次事件循环（每帧）渲染的行数。
在ListView标签下添加：
pageSize = {10}
removeClippedSubviews
用于提升大列表的滚动性能。需要给行容器添加样式overflow:'hidden'。（Android已默认添加此样式）。此属性默认开启。
scrollRenderAheadDistance number
当一个行接近屏幕范围多少像素之内的时候，就开始渲染这一行。
方法
renderFooter renderHeader
页头与页脚会在每次渲染过程中都重新渲染（如果提供了这些属性）。如果它们重绘的性能开销很大，把他们包装到一个StaticContainer或者其它恰当的结构中。页脚会永远在列表的最底部，而页头会在最顶部。
onEndReached
当所有的数据都已经渲染过，并且列表被滚动到距离最底部不足onEndReachedThreshold个像素的距离时调用。原生的滚动事件会被作为参数传递。译注：当第一次渲染时，如果数据不足一屏（比如初始值是空的），这个事件也会被触发。
onChangeVisibleRows
当可见的行的集合变化的时候调用此回调函数。visibleRows 以 { sectionID: { rowID: true }}的格式包含了所有可见行，而changedRows 以{ sectionID: { rowID: true | false }}的格式包含了所有刚刚改变了可见性的行，其中如果值为true表示一个行变得可见，而为false表示行刚刚离开可视区域而变得不可见。
renderRow
从数据源(Data source)中接受一条数据，以及它和它所在section的ID。返回一个可渲染的组件来为这行数据进行渲染。默认情况下参数中的数据就是放进数据源中的数据本身，不过也可以提供一些转换器。
如果某一行正在被高亮（通过调用highlightRow函数），ListView会得到相应的通知。当一行被高亮时，其两侧的分割线会被隐藏。行的高亮状态可以通过调用highlightRow(null)来重置。
renderSeparator
如果提供了此属性，一个可渲染的组件会被渲染在每一行下面，除了小节标题的前面的最后一行。在其上方的小节ID和行ID，以及邻近的行是否被高亮会作为参数传递进来。
效果
引用：http://reactnative.cn/docs/0.27/getting-started.html#content
