ReactNative实现ListView分组，悬浮效果

欢迎大家访问我的个人网站 - Sunday俱乐部

实现效果

其实在ReactNative中实现ListView的分组效果的方式与Android中的ExpandableListview非常相似，只是在表现形式上更趋近于IOS中的UITableView而已。
在ReactNative中ListView分组效果的数据结构为

var dataBlob = {'sectionId1' : {...sectionId1 data},'sectionId1:rowId1' : {...row1 data},'sectionId1:rowId2' : {...row2 data},'sectionId2' : {...sectionId2 data},'sectionId2:rowId1' : {...row1 data},'sectionId2:rowId2' : {...row2 data},...
}var sectionIds = ['sectionId1','sectionId2','sectionId3'...];var rowIds = [['rowId1','rowId2'...],['rowId1','rowId2'...],...];

如上所示，在RN中ListView中的分组数据全部放入dataBlob 中，通过 ‘sectionId ’ 来获取每个组的header中的数据，通过 ‘sectionId:rowId’ 这种形式来获取每个组中对应的列的数据。其中’sectionId ‘保存在一个一维数组中，’rowIds’保存在一个二维数组中。

在state中去设置dataSource的方式也与普通的ListView有所不同。

// 初始化函数getInitialState(){var  getSectionData = (dataBlob, sectionID) => {return dataBlob[sectionID];};var  getRowData = (dataBlob, sectionID, rowID) => {return dataBlob[sectionID + ':' + rowID];};return{dataSource: new ListView.DataSource({getSectionData: getSectionData, // 获取组中数据getRowData: getRowData, // 获取行中的数据rowHasChanged: (r1, r2) => r1 !== r2,sectionHeaderHasChanged:(s1, s2) => s1 !== s2})}}

下面是具体代码的实现方式：

/*** Sample React Native App* https://github.com/facebook/react-native* @flow*/import React, { Component } from 'react';
import {AppRegistry,StyleSheet,Text,View,ListView,TouchableOpacity,Image,AlertIOS
} from 'react-native';var Car = require('./Cars.json');var SectionListView = React.createClass({getInitialState(){var getSectionData = (dataBlob,sectionID) => {return dataBlob[sectionID];};var getRowData = (dataBlob,sectionID,rowID) => {return dataBlob[sectionID + ":" + rowID];};return {dataSource:new ListView.DataSource({getSectionData:getSectionData,getRowData:getRowData,rowHasChanged:(r1 , r2) => r1 !== r2,sectionHeaderHasChanged:(s1, s2) => s1 !== s2,})};},render(){return(<ListViewdataSource={this.state.dataSource}renderRow={this.renderRow}renderSectionHeader={this.renderSectionHeader}contentContainerStyle={styles.listStyle}/>);},componentDidMount(){this.loadListViewDataFormJson();},loadListViewDataFormJson(){//    拿到所有的json数据var jsonData = Car.data;//    定义变量var dataBlob = {},sectionIDs = [],rowIDs = [];for (var i = 0 ; i < jsonData.length ; i++){//    1.拿到所有的sectionIdsectionIDs.push(i);//    2.把组中的内容放入dataBlob内容中dataBlob[i] = jsonData[i].title;//    3.设置改组中每条数据的结构rowIDs[i] = [];//    4.取出改组中所有的数据var cars = jsonData[i].cars;//    5.便利cars,设置每组的列表数据for (var j = 0 ; j < cars.length ; j++){//    改组中的每条对应的rowIdrowIDs[i].push(j);// 把每一行中的内容放入dataBlob对象中dataBlob[i+':'+j] = cars[j];}}// 更新状态this.setState({dataSource: this.state.dataSource.cloneWithRowsAndSections(dataBlob,sectionIDs,rowIDs)});},// 每一行中的数据renderRow(rowData){return (<TouchableOpacity><View style={styles.rowView}><Image source={{uri:rowData.icon}} style={styles.rowImage}/><View style={styles.rowTitleSup}><Text style={styles.rowTitle}>{rowData.name}</Text></View></View></TouchableOpacity>);},// 每一组对应的数据renderSectionHeader(sectionData,sectionId){return (<View style={styles.sectionView}><Text style={styles.sectionTitle}>{sectionData}</Text></View>);}});const styles = StyleSheet.create({listStyle:{},sectionView:{height:22,backgroundColor:"#c3c3c3",justifyContent:"center"},sectionTitle:{marginLeft:16,},rowView:{height:44,flexDirection:'row',paddingLeft:16,alignItems:'center'},rowImage:{width:44,height:44},rowTitleSup:{height:44,width:700,borderBottomWidth:1,borderBottomColor:"#c3c3c3",marginLeft:16,justifyContent:'center'},rowTitle:{fontSize:16,}
});module.exports = SectionListView;

Car.json

{"data": [{"cars": [{"icon": "m_180_100.png","name": "AC Schnitzer"},{"icon": "m_92_100.png","name": "阿尔法·罗密欧"},{"icon": "m_9_100.png","name": "奥迪"},{"icon": "m_97_100.png","name": "阿斯顿·马丁"}],"title": "A"},{"cars": [{"icon": "m_172_100.png","name": "巴博斯"},{"icon": "m_157_100.png","name": "宝骏"},{"icon": "m_3_100.png","name": "宝马"},{"icon": "m_82_100.png","name": "保时捷"},{"icon": "m_163_100.png","name": "北京汽车"},{"icon": "m_211_100.png","name": "北汽幻速"},{"icon": "m_168_100.png","name": "北汽威旺"},{"icon": "m_14_100.png","name": "北汽制造"},{"icon": "m_2_100.png","name": "奔驰"},{"icon": "m_59_100.png","name": "奔腾"},{"icon": "m_26_100.png","name": "本田"},{"icon": "m_5_100.png","name": "标致"},{"icon": "m_127_100.png","name": "别克"},{"icon": "m_85_100.png","name": "宾利"},{"icon": "m_15_100.png","name": "比亚迪"},{"icon": "m_135_100.png","name": "布加迪"}],"title": "B"},{"cars": [{"icon": "m_129_100.png","name": "昌河"}],"title": "C"},{"cars": [{"icon": "m_113_100.png","name": "道奇"},{"icon": "m_165_100.png","name": "大通"},{"icon": "m_8_100.png","name": "大众"},{"icon": "m_27_100.png","name": "东风"},{"icon": "m_197_100.png","name": "东风风度"},{"icon": "m_141_100.png","name": "东风风神"},{"icon": "m_115_100.png","name": "东风风行"},{"icon": "m_205_100.png","name": "东风小康"},{"icon": "m_29_100.png","name": "东南"},{"icon": "m_179_100.png","name": "DS"}],"title": "D"},{"cars": [{"icon": "m_91_100.png","name": "法拉利"},{"icon": "m_199_100.png","name": "飞驰商务车"},{"icon": "m_164_100.png","name": "菲斯克"},{"icon": "m_40_100.png","name": "菲亚特"},{"icon": "m_7_100.png","name": "丰田"},{"icon": "m_67_100.png","name": "福迪"},{"icon": "m_190_100.png","name": "弗那萨利"},{"icon": "m_208_100.png","name": "福汽启腾"},{"icon": "m_17_100.png","name": "福特"},{"icon": "m_128_100.png","name": "福田"}],"title": "F"},{"cars": [{"icon": "m_109_100.png","name": "GMC"},{"icon": "m_110_100.png","name": "光冈"},{"icon": "m_147_100.png","name": "广汽"},{"icon": "m_63_100.png","name": "广汽吉奥"},{"icon": "m_133_100.png","name": "广汽日野"},{"icon": "m_182_100.png","name": "观致汽车"}],"title": "G"},{"cars": [{"icon": "m_31_100.png","name": "哈飞"},{"icon": "m_196_100.png","name": "哈弗"},{"icon": "m_170_100.png","name": "海格"},{"icon": "m_32_100.png","name": "海马"},{"icon": "m_149_100.png","name": "海马商用车"},{"icon": "m_181_100.png","name": "恒天汽车"},{"icon": "m_58_100.png","name": "红旗"},{"icon": "m_52_100.png","name": "黄海"},{"icon": "m_112_100.png","name": "华泰"},{"icon": "m_45_100.png","name": "汇众"}],"title": "H"},{"cars": [{"icon": "m_35_100.png","name": "江淮"},{"icon": "m_37_100.png","name": "江铃"},{"icon": "m_38_100.png","name": "江南"},{"icon": "m_98_100.png","name": "捷豹"},{"icon": "m_143_100.png","name": "吉利帝豪"},{"icon": "m_144_100.png","name": "吉利全球鹰"},{"icon": "m_148_100.png","name": "吉利英伦"},{"icon": "m_39_100.png","name": "金杯"},{"icon": "m_57_100.png","name": "金龙联合"},{"icon": "m_161_100.png","name": "金旅客车"},{"icon": "m_152_100.png","name": "九龙"},{"icon": "m_4_100.png","name": "Jeep"}],"title": "J"},{"cars": [{"icon": "m_188_100.png","name": "卡尔森"},{"icon": "m_107_100.png","name": "凯迪拉克"},{"icon": "m_150_100.png","name": "开瑞"},{"icon": "m_51_100.png","name": "克莱斯勒"},{"icon": "m_145_100.png","name": "科尼塞克"},{"icon": "m_212_100.png","name": "KTM"}],"title": "K"},{"cars": [{"icon": "m_86_100.png","name": "兰博基尼"},{"icon": "m_200_100.png","name": "蓝海房车"},{"icon": "m_80_100.png","name": "劳斯莱斯"},{"icon": "m_94_100.png","name": "雷克萨斯"},{"icon": "m_99_100.png","name": "雷诺"},{"icon": "m_146_100.png","name": "莲花"},{"icon": "m_153_100.png","name": "猎豹汽车"},{"icon": "m_76_100.png","name": "力帆"},{"icon": "m_16_100.png","name": "铃木"},{"icon": "m_166_100.png","name": "理念"},{"icon": "m_95_100.png","name": "林肯"},{"icon": "m_36_100.png","name": "陆风"},{"icon": "m_96_100.png","name": "路虎"},{"icon": "m_83_100.png","name": "路特斯"}],"title": "L"},{"cars": [{"icon": "m_183_100.png","name": "迈凯伦"},{"icon": "m_93_100.png","name": "玛莎拉蒂"},{"icon": "m_18_100.png","name": "马自达"},{"icon": "m_79_100.png","name": "MG"},{"icon": "m_81_100.png","name": "MINI"},{"icon": "m_201_100.png","name": "摩根"}],"title": "M"},{"cars": [{"icon": "m_155_100.png","name": "纳智捷"}],"title": "N"},{"cars": [{"icon": "m_104_100.png","name": "欧宝"},{"icon": "m_84_100.png","name": "讴歌"},{"icon": "m_171_100.png","name": "欧朗"}],"title": "O"},{"cars": [{"icon": "m_156_100.png","name": "启辰"},{"icon": "m_43_100.png","name": "庆铃"},{"icon": "m_42_100.png","name": "奇瑞"},{"icon": "m_28_100.png","name": "起亚"}],"title": "Q"},{"cars": [{"icon": "m_30_100.png","name": "日产"},{"icon": "m_78_100.png","name": "荣威"},{"icon": "m_142_100.png","name": "瑞麒"}],"title": "R"},{"cars": [{"icon": "m_25_100.png","name": "三菱"},{"icon": "m_209_100.png","name": "山姆"},{"icon": "m_195_100.png","name": "绅宝"},{"icon": "m_50_100.png","name": "双环"},{"icon": "m_102_100.png","name": "双龙"},{"icon": "m_111_100.png","name": "斯巴鲁"},{"icon": "m_10_100.png","name": "斯柯达"},{"icon": "m_89_100.png","name": "smart"}],"title": "S"},{"cars": [{"icon": "m_202_100.png","name": "泰卡特"},{"icon": "m_189_100.png","name": "特斯拉"}],"title": "T"},{"cars": [{"icon": "m_140_100.png","name": "威麟"},{"icon": "m_186_100.png","name": "威兹曼"},{"icon": "m_19_100.png","name": "沃尔沃"},{"icon": "m_48_100.png","name": "五菱"}],"title": "W"},{"cars": [{"icon": "m_13_100.png","name": "现代"},{"icon": "m_174_100.png","name": "星客特"},{"icon": "m_71_100.png","name": "新凯"},{"icon": "m_87_100.png","name": "西雅特"},{"icon": "m_49_100.png","name": "雪佛兰"},{"icon": "m_6_100.png","name": "雪铁龙"}],"title": "X"},{"cars": [{"icon": "m_194_100.png","name": "扬州亚星客车"},{"icon": "m_138_100.png","name": "野马汽车"},{"icon": "m_100_100.png","name": "英菲尼迪"},{"icon": "m_53_100.png","name": "一汽"},{"icon": "m_41_100.png","name": "依维柯"},{"icon": "m_75_100.png","name": "永源"}],"title": "Y"},{"cars": [{"icon": "m_136_100.png","name": "长安轿车"},{"icon": "m_159_100.png","name": "长安商用"},{"icon": "m_21_100.png","name": "长城"},{"icon": "m_203_100.png","name": "之诺"},{"icon": "m_60_100.png","name": "中华"},{"icon": "m_167_100.png","name": "中欧"},{"icon": "m_77_100.png","name": "众泰"},{"icon": "m_204_100.png","name": "中通客车"},{"icon": "m_33_100.png","name": "中兴"}],"title": "Z"}]
}

ReactNative实现ListView分组，悬浮效果相关推荐

android 仿qq好友动态,Android UI仿QQ好友列表分组悬浮效果
本文实例为大家分享了Android UI仿QQ好友列表分组悬浮效果的具体代码,供大家参考,具体内容如下楼主是在平板上測试的.图片略微有点大,大家看看效果就好接下来贴源代码: PinnedHeade ...
仿支付宝账单的效果（listview分组）
最近公司要添加类似支付宝账单的listview分组顶部悬浮的效果,其实总的实现思想很简单.由于后台给的数据的不同 ,可能处理的方式也不一样. 接下来咱们就一起来探讨研究一下. 首先 ,自定 ...
仿饿了么，百度外卖这些App的双ListView列表联动效果
仿饿了么,百度外卖这些App的双列表联动效果思路: 1.自定义一个悬浮条目且带移动替换效果的ListView. 2.在界面中左边是个普通的ListView,右边是我们自定义带效果的ListView. ...
React Native悬浮效果组件
由于其他的原因,对于React Native相关的内容最近没有投入太多的关注,从去年年底出版了<React Native移动开发实战>后,对于React Native的关注就比较少了.最近 ...
RecyclerView实现收缩分组悬浮列表
今天给大伙儿分享一个用RecyclerView实现收缩分组悬浮列表的功能.如果只是想实现分组收缩的功能ExpandListView就完全可以做到了,这次咱们不仅要实现伸展收缩功能,还得实现分组悬浮,同 ...
android 分组 listview,Android实现的ListView分组布局改进示例
本文实例讲述了android实现的listview分组布局改进方法.分享给大家供大家参考,具体如下: 由于是在网上转载的一篇文章,在这里就不多说废话了,首先看一下最终的效果图: 然后是实现该listv ...
如果去掉UITableView上的section的headerView和footerView的悬浮效果
项目需要cell的间距,又不需要悬浮效果,百度之后找到这个方法,记录一下,备忘. 用UIScrollView的代理方法实现 - (void)scrollViewDidScroll:(UIScrollV ...
[译] CSS 变量实现炫酷鼠标悬浮效果
原文: Stunning hover effects with CSS variables 我的博客:[译] CSS 变量实现炫酷鼠标悬浮效果我最近从Grover网站上的有趣的悬停动画中获得灵感.将 ...
2011年最新使用CSS3实现各种独特悬浮效果的教程
日期:2011/11/03 来源:tympanus 编译:GBin1.com CSS3的功能非常强大,这个毋庸置疑.在这篇教程中我们将使用一些独特的方式来实现一些特效.我们使用CSS3的trans ...
html 悬浮阴影,css实现悬浮效果的阴影的方法示例
本文介绍了css实现悬浮效果的阴影的方法示例,分享给大家,具体如下: 要实现的效果图: 实现的代码: -webkit-box-shadow:0px 3px 3px #c8c8c8 ; -moz-box ...

ReactNative实现ListView分组，悬浮效果

ReactNative实现ListView分组，悬浮效果相关推荐

最新文章

热门文章