ListView

創(chuàng)建文檔時(shí)間：2016.3.23-09:18
作者：三月懶驢
使用平臺(tái)：Mac

作用

ListView在APP的作用可謂是重中之重，除非你不需要要多信息展示，否則的話，一個(gè)APP肯定是要用ListView來(lái)工作的。而優(yōu)化它，也是必須的。

簡(jiǎn)單代碼

'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

一個(gè)簡(jiǎn)單的ListView

一個(gè)ListView的最簡(jiǎn)單參數(shù)有兩個(gè):
一個(gè)是dataSource：數(shù)據(jù)源，
另外一個(gè)是renderRow，渲染每一行的動(dòng)作。

• 先簡(jiǎn)單看看：初始化一個(gè)數(shù)據(jù)源

    let ds = new ListView.DataSource();
  

• 里面的參數(shù)：后面是ES6語(yǔ)法的箭頭函數(shù)，就是為rowHasChanged定義一個(gè)函數(shù)

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

• 下面把數(shù)據(jù)填入初始化的數(shù)據(jù)源去。

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

• renderRow
  傳來(lái)的參數(shù)有：rowData, sectionID, rowID, highlightRow
  這里主要用了rowData，也就是我們剛才填進(jìn)去的數(shù)據(jù)：一個(gè)數(shù)組

由上面可以看到，我們先定義一個(gè)數(shù)據(jù)源，就是一個(gè)數(shù)組，這個(gè)數(shù)組就會(huì)在renderRow的時(shí)候，以rowData傳入。傳入之后我們可以把它渲染出來(lái)，至于渲染的樣式的話，可以自己寫，看方法： renderRow

Section

API里面木有細(xì)說(shuō)這個(gè)東西，不過(guò)看例子的話，我們可以看到官方的例子里面不是像我們這樣寫的

//我們的寫法
this.state = {
    dataSource: ds.cloneWithRows(['row 1']),
};
//官方
this.state = {
    dataSource: ds.而是cloneWithRowsAndSections(['row 1']),
};

cloneWithRows & cloneWithRowsAndSections。那么這兩個(gè)有什么不同？什么又是Sections！如果你是一個(gè)前端的話，你會(huì)很簡(jiǎn)單明白Section！其實(shí)就是表頭，以前用Table標(biāo)簽一樣也有表頭這個(gè)東西。而在IOS里面，表頭在滾動(dòng)到頂部的時(shí)候會(huì)附在頂部。我們這里稱之為Section。官方木有很多的文檔去說(shuō)明它，但是用起來(lái)的時(shí)候很簡(jiǎn)單。

在木有Section的時(shí)候，我們只需提供一個(gè)數(shù)組過(guò)去就行，而當(dāng)你需要表頭的時(shí)候，你需要提供的是一個(gè)對(duì)象！

下面舉個(gè)例子：

//木有Section的時(shí)候
var data = [1,2,3,4,5,6]
//有Section的時(shí)候
var data = {
    'section1':[1,2,4,5,6],
    'section2':[1,2,4,5,6],
}

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


/*renderSectionHeader*/ 

class List extends Component{
    constructor(props){
        super(props)
        let ds = 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 = '測(cè)試1'
        dataObj[section] = []
        for (let i=0;i<10;i++){
            let data = {
                name:'第'+i+'行',
                num:i
            }
            dataObj[section][i] = data
        }
        section = '測(cè)試2'
        dataObj[section] = []
        for (let i=0;i<10;i++){
            let data = {
                name:'第'+i+'行',
                num:i
            }
            dataObj[section][i] = data
        }
        return dataObj
    }
    renderRow(rowData,sectionID,rowID,highlightRow){
        console.log(sectionID);
        return (
            <View style={styles.rowItem}>
                <View style={styles.rowItemLeft}>
                    <Text style={styles.rowItemText}>{rowData.name}</Text>
                </View>
                <View style={styles.rowItemRight}>
                    <Text style={styles.rowItemText}>數(shù)據(jù)：{rowData.num}</Text>
                </View>
            </View>
        )
    }
    onEndReached(e){
        //console.log(e)
    }
    renderSectionHeader(sectionData, sectionID){
        console.log(sectionData)
        return(
            <View style={styles.rowTite}>
                <Text>{sectionID}</Text>
            </View>
        )
    }
    onChangeVisibleRows(visibleRows, changedRows){
        //console.log(visibleRows)
    }
    render(){
        return (
            <ListView
              style={styles.body}
              onEndReached = {this.onEndReached}
              onEndReachedThreshold = {20}
              renderSectionHeader = {this.renderSectionHeader}
              onChangeVisibleRows = {this.onChangeVisibleRows}
              dataSource={this.state.dataSource}
              renderRow={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,
        alignItems:'center',
        justifyContent:'center',
        backgroundColor:'#ccc',
    },
    rowItemLeft:{
        flex:1, 
        borderRightWidth:1,
        borderRightColor:'#ccc',
    },
    rowItemRight:{
        flex:3,
    },
    rowItemText:{
        textAlign:'center'
    },
}

export default List

課后練習(xí)

其他的API，自己可以試試

• initialListSize:一開(kāi)始渲染幾個(gè)！如果寫成1的話，會(huì)看到一項(xiàng)一項(xiàng)出來(lái)。
• onChangeVisibleRows 的 visibleRows, changedRows： 前者是當(dāng)前頁(yè)面可用看到的List Item 的ID 集合，以 { sectionID: { rowID: true }}形式表示,后者是頁(yè)面發(fā)生變化了，導(dǎo)致List Item變化的Item 狀態(tài)集合， { sectionID: { rowID: true ｜ false }} 表示
• onEndReached / onEndReachedThreshold：設(shè)定了onEndReachedThreshold之后就判斷，快到底部onEndReachedThreshold像素的時(shí)候，調(diào)用onEndReachedThreshold。