1.属性：
dataSource: 列表以来的数据源
initialListSize: 指定组件刚加载时渲染多少行数据
onChangeVisibleRows（function）可见row的集合变化时 调用此函数。
onEndReached（function）: 所有数据已经被渲染，滚动到列表底部时会调用此函数，原生的滚动事件会被作为参数传递。第一次渲染时，数据不足以渲染整个屏幕，也会调用此函数。
onEndReachedThreshold: 调用onEndReached前的临界值
pageSize：每次事件循环渲染的行数。
renderRow (function): (rowData, sectionID, rowID, highlightRow) => renderable 从数据源(Data source)中接受一条数据，以及它和它所在section的ID。返回一个可渲染的组件来为这行数据进行渲染。默认情况下参数中的数据就是放进数据源中的数据本身，不过也可以提供一些转换器。 如果某一行正在被高亮（通过调用highlightRow函数），ListView会得到相应的通知。当一行被高亮时，其两侧的分割线会被隐藏。行的高亮状态可以通过调用highlightRow(null)来重置
2. 方法：
scrollTo ： 滚动到指定的x，y偏移处
scrollToEnd 滚动到视图的底部
3. 最基本的使用发放就是创建一个Listview.DataSource数据源，然后给它传递一个普通的数据数组，再用数据源实例化一个List View组件， 并定义它的renderRow回调函数，这个函数会接受数组中的每个数据作为参数，返回listView的每一行。
class TestListview extends React.Component { constructor(props) { super(props); var myData = new ListView.DataSource({rowHasChanged: (r1, r2) => r1 !== r2}); this.state = { dataSource: myData.cloneWithRows(['list1','list2']); }; } _renderRow = function(rowData, rowId) { return( <Text>{rowData + ' ' + rowId}</Text> ) } render() { return( <ListView dataSource = {this.state.dataSource} renderRow= {(rowData, rowId) => this._renderRow(rowData, rowId)} /> ); } }Demo:
//@flow 'use strict'; import React, {Component} from 'react'; import ReactNative, {AppRegistry} from 'react-native' import { Image, ListView, TouchableHighlight, StyleSheet, TouchableOpacity, Text, View, } from 'react-native'; var THUMB_URLS = [ require('./Thumbnails/a.png'), require('./Thumbnails/b.png'), ]; var ListViewDemo = React.createClass({ getInitialState: function() { var ds = new ListView.DataSource({rowHasChanged: (r1, r2) => r1 !== r2}); return { dataSource: ds.cloneWithRows(['hello1', 'hello2']), } }, _renderRow: function(rowData, sectionId, rowId) { var imgSource = THUMB_URLS[rowId]; return( <TouchableOpacity> <View> <View style={styles.row}> <Image style={styles.thumb} source={imgSource}/> <Text style={{flex:1, fontSize:16, coloe:'blue'}}> {rowData + 'hihihihhi'} </Text> </View> </View> </TouchableOpacity> ); }, render: function() { return( <ListView dataSource={this.state.dataSource} renderRow={this._renderRow}/> ); } }); var styles = StyleSheet.create({ row:{ flexDirection:'row', padding:10, justifyContent:'center', backgroundColor:'#F6F6F6', }, thumb: { width:50, height:50, }, }); AppRegistry.registerComponent('HiFang', () => ListViewDemo);
