ListView在APP的作用可谓是重中之重，除非你不需要要多信息展示，否则的话，一个APP肯定是要用ListView来工作的。而优化它，也是必须的。

简单代码

'use strict'
import React from 'react-native'
let {Component,StyleSheet,View,Text,ListView} = React;

class List extends Component{
    constructor(props){
        super(props)
        let ds = new ListView.DataSource({rowHasChanged: (r1,r2) => r1 !== r2});
        this.state = {
            dataSource: ds.cloneWithRows(['row 1']),};
    }
    renderRow(rowData){
        return <Text>{rowData}</Text>
    }
    render(){
        return (
            <ListView style={styles.body} dataSource={this.state.dataSource} renderRow={this.renderRow} /> ); } } const styles = { body:{ flex:1,},} export default List

一个简单的ListView

一个ListView的最简单参数有两个:
一个是dataSource：数据源，
另外一个是renderRow，渲染每一行的动作。

• 先简单看看：初始化一个数据源

  let ds = new ListView.DataSource();

• 里面的参数：后面是ES6语法的箭头函数，就是为rowHasChanged定义一个函数

   rowHasChanged: (r1,r2) => r1 !== r2

• 下面把数据填入初始化的数据源去。

  dataSource: ds.cloneWithRows(['row 1']),

• renderRow
  传来的参数有：rowData,sectionID,rowID,highlightRow
  这里主要用了rowData，也就是我们刚才填进去的数据：一个数组

  由上面可以看到，我们先定义一个数据源，就是一个数组，这个数组就会在renderRow的时候，以rowData传入。传入之后我们可以把它渲染出来，至于渲染的样式的话，可以自己写，看方法：renderRow

Section

API里面木有细说这个东西，不过看例子的话，我们可以看到官方的例子里面不是像我们这样写的

//我们的写法
this.state = {
    dataSource: ds.cloneWithRows([//官方
this.state = {
    dataSource: ds.而是cloneWithRowsAndSections([cloneWithRows & cloneWithRowsAndSections。那么这两个有什么不同？什么又是Sections！如果你是一个前端的话，你会很简单明白Section！其实就是表头，以前用Table标签一样也有表头这个东西。而在IOS里面，表头在滚动到顶部的时候会附在顶部。我们这里称之为Section。官方木有很多的文档去说明它，但是用起来的时候很简单。
 
 
 
  
 在木有Section的时候，我们只需提供一个数组过去就行，而当你需要表头的时候，你需要提供的是一个对象！
 
 
 
 
下面举个例子：
 
 
//木有Section的时候
var data = [1,2,152)">3,152)">4,152)">5,152)">6]
//有Section的时候
data = {
    'section1':[6],'section2':[/*renderSectionHeader*/ 

new ListView.DataSource({
            rowHasChanged: (r1,r2) => r1 !== r2,sectionHeaderHasChanged: (s1,s2) => s1 !== s2
        });
        this.state = {
            dataSource: ds.cloneWithRowsAndSections(this.getRows()),};
    }
    getRows(){
        let dataObj = {}
        let section = '测试1'
        dataObj[section] = []
        for (let i=0;i<10;i++){
            let data = {
                name:'第'+i+'行',num:i
            }
            dataObj[section][i] = data
        }
        section = '测试2'
        dataObj[section] = []
        num:i
            }
            dataObj[section][i] = data
        }
        return dataObj
    }
    renderRow(rowData,highlightRow){
        console.log(sectionID);
        View style={styles.rowItem}> <{styles.rowItemLeft}> <Text style={styles.rowItemText}>{rowData.name}</Text> </View> <{styles.rowItemRight}> <{styles.rowItemText}>数据：{rowData.num}</View> </View>
        )
    }
    onEndReached(e){
        //console.log(e)
    }
    renderSectionHeader(sectionData,sectionID){
        console.log(sectionData)
        return(
            <{styles.rowTite}> <Text>{sectionID}</View>
        )
    }
    onChangeVisibleRows(visibleRows,changedRows){
        //console.log(visibleRows)
    }
    render(){
        {styles.body} onEndReached = {this.onEndReached} onEndReachedThreshold = {20} renderSectionHeader = {this.renderSectionHeader} onChangeVisibleRows = {this.onChangeVisibleRows} dataSource={this.renderRow} /> ) } } const styles = { body:{ flex:1,rowItem:{ flex:1,height:50,flexDirection:'row',justifyContent:'center',alignItems:'center',borderBottomWidth:1,borderBottomColor:'#ddd',rowTite:{ height:30,backgroundColor:'#ccc',rowItemLeft:{ flex:1,borderRightWidth:1,borderRightColor:'#ccc',rowItemRight:{ flex:3,rowItemText:{ textAlign:'center' },} export default List
 
 
 课后练习
 
 
其他的API，自己可以试试
 
 
 
  
initialListSize:一开始渲染几个！如果写成1的话，会看到一项一项出来。
 
  
onChangeVisibleRows 的 visibleRows,changedRows： 前者是当前页面可用看到的List Item 的ID 集合，以 { sectionID: { rowID: true }}形式表示,后者是页面发生变化了，导致List Item变化的Item 状态集合， { sectionID: { rowID: true ｜ false }} 表示
 
  
onEndReached / onEndReachedThreshold：设定了onEndReachedThreshold之后就判断，快到底部onEndReachedThreshold像素的时候，调用onEndReachedThreshold。  
 
 
 
 
 
  
 
 
 
 
 
  
 
 
 
 
 
  
 
 
 
 

   参考 ：http://www.lcode.org/%E3%80%90react-native%E5%BC%80%E5%8F%91%E3%80%91react-native%E6%8E%A7%E4%BB%B6%E4%B9%8Blistview%E7%BB%84%E4%BB%B6%E8%AE%B2%E8%A7%A3%E4%BB%A5%E5%8F%8A%E8%AF%A6%E7%BB%86%E5%AE%9E%E4%BE%8B19/ 
 
 
 
 
  
 【React Native开发】React Native控件之ListView组件讲解以及详细实例(19)