React-Native ListView

转自：http://www.jianshu.com/p/f39f75cf3e38

我的React-Native不得不说的一些事情－5

ListView

作用

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(['row 1']),
};
//官方
this.state = {
    dataSource: ds.而是cloneWithRowsAndSections(['row 1']),
};

cloneWithRows & cloneWithRowsAndSections。那么这两个有什么不同？什么又是Sections！如果你是一个前端的话，你会很简单明白Section！其实就是表头，以前用Table标签一样也有表头这个东西。而在IOS里面，表头在滚动到顶部的时候会附在顶部。我们这里称之为Section。官方木有很多的文档去说明它，但是用起来的时候很简单。

在木有Section的时候，我们只需提供一个数组过去就行，而当你需要表头的时候，你需要提供的是一个对象！

下面举个例子：

//木有Section的时候
var data = [1,2,3,4,5,6]
//有Section的时候
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 = '测试1'
        dataObj[section] = []
        for (let i=0;i<10;i++){
            let data = {
                name:'第'+i+'行',
                num:i
            }
            dataObj[section][i] = data
        }
        section = '测试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}>数据：{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

课后练习

其他的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)