当滑动时,这个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
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。