ListView
创建文档时间：2016.3.23-09:18
作者：三月懒驴
使用平台：Mac
作用
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 {rowData}
}
render(){
return (
一个简单的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 (
{rowData.name}
数据：{rowData.num}
)
}
onEndReached(e){
//console.log(e)
}
renderSectionHeader(sectionData, sectionID){
console.log(sectionData)
return(
{sectionID}
)
}
onChangeVisibleRows(visibleRows, changedRows){
//console.log(visibleRows)
}
render(){
return (
课后练习
其他的API，自己可以试试
- initialListSize:一开始渲染几个！如果写成1的话，会看到一项一项出来。
- onChangeVisibleRows 的 visibleRows, changedRows： 前者是当前页面可用看到的List Item 的ID 集合，以 { sectionID: { rowID: true }}形式表示,后者是页面发生变化了，导致List Item变化的Item 状态集合， { sectionID: { rowID: true ｜ false }} 表示
- onEndReached / onEndReachedThreshold：设定了onEndReachedThreshold之后就判断，快到底部onEndReachedThreshold像素的时候，调用onEndReachedThreshold。