React Native 基础 之ListView实现吸顶效果

当滑动时，这个section header会固定在头部，也就是吸顶效果。但是遗憾的是，在Android平台上不支持吸顶效果

实现吸顶效果需要用到此方法

cloneWithRowsAndSections(dataBlob, sectionIdentities, rowIdentities)

此方法作用基本等同

cloneWithRows

，区别在于可以额外指定

sectionIdentities

。如果你不需要section，则直接使用

cloneWithRows

即可。

sectionIdentities

同理是包含了section标识符的数组。例如['s1', 's2', ...]。如果没有指定此数组，则默认取section的key。

dataBlob

它是一种数据结构，包含ListView所需的所有数据（section header 和 rows），如下图:



sectionIDs

用于标识每组section，如下图:



rowIDs

用于描述每个 section 里的每行数据的位置及是否需要渲染。在ListView渲染时，会先遍历 rowIDs 获取到对应的 dataBlob 数据。


代码实现：

/**
* Sample React Native App
* https://github.com/facebook/react-native * @flow
*/

import React, { Component } from 'react';
import {
AppRegistry,
StyleSheet,
TextInput,
TouchableOpacity,
ScrollView,
ListView,
Image,
Text,
View
} from 'react-native';
import CartData from "./Car.json";

export default class listViewCart extends Component {

constructor(props) {
super(props);

let getSectionData = (dataBlob, sectionID) => {
return dataBlob[sectionID];
};
let getRowData = (dataBlob, sectionID, rowID) => {
return dataBlob[sectionID + ':' + rowID];
};
//1.设置返回数据
this.state = {
dataSource: new ListView.DataSource({
getSectionData: getSectionData, // 获取组中数据
getRowData: getRowData, // 获取行中的数据
rowHasChanged: (r1, r2) => r1 !== r2,
sectionHeaderHasChanged: (s1, s2) => s1 !== s2
})
};
}

//复杂的操作:数据请求 或者 异步操作(定时器)
componentDidMount() {
//调用json数据
this._loadDataFromJson();
}

render() {
return (
<View style={styles.outerViewStyle}>
<View style={styles.headerViewStyle}>
<Text style={{ color: 'white', fontSize: 25 }}>SeeMyGo品牌</Text>
</View>
<ListView
dataSource={this.state.dataSource}
renderRow={this._renderRow}
renderSectionHeader={this._renderSectionHeader}
/>
</View>
);
}

//每一行的数据
_renderRow(rowData) {
return (
<TouchableOpacity activeOpacity={0.5}>
<View style={styles.rowStyle}>
<Image source={{ uri: rowData.icon }} style={styles.rowImageStyle} />
<Text style={{ marginLeft: 5 }}>{rowData.name}</Text>
</View>
</TouchableOpacity>
);
}

//返回每一组的数据
_renderSectionHeader(sectionData, sectionID) {
return (
<View style={styles.sectionHeaderViewStyle}>
<Text style={{ marginLeft: 5, color: 'red' }}>{sectionData}</Text>
</View>
);
}

_loadDataFromJson() {
// 拿到json数据
let jsonData = CartData.data;
// 定义一些变量
let dataBlob = {},
sectionIDs = [],
rowIDs = [],
cars = [];
for (let i in jsonData) {
// 1. 把组号放入sectionIDs数组中
sectionIDs.push(i);
// 2.把组中内容放入dataBlob对象中
dataBlob[i] = jsonData[i].title;
// 3. 取出该组中所有的车
cars = jsonData[i].cars;
rowIDs[i] = [];
// 4. 遍历所有的车数组
for (let j in cars) {
// 把行号放入rowIDs
rowIDs[i].push(j);
// 把每一行中的内容放入dataBlob对象中
dataBlob[i + ':' + j] = cars[j];
}
}
//更新状态机
this.setState({
dataSource: this.state.dataSource.cloneWithRowsAndSections(dataBlob, sectionIDs, rowIDs)
});
}

}

// 设置样式
const styles = StyleSheet.create({
outerViewStyle:{
//占满窗口
flex:1
},

headerViewStyle:{
height:64,
backgroundColor:'orange',
justifyContent:'center',
alignItems:'center'
},

rowStyle:{
// 设置主轴的方向
flexDirection:'row',
// 侧轴方向居中
alignItems:'center',
padding:10,

borderBottomColor:'#e8e8e8',
borderBottomWidth:0.5
},

rowImageStyle:{
width:70,
height:70,
},

sectionHeaderViewStyle:{
backgroundColor:'#e8e8e8',
height:25,
justifyContent:'center'
}
});


链接：http://pan.baidu.com/s/1hr35ph6 密码：gwqm