React Native实现仿天猫商品分类页面
来源:互联网 发布:大数据公司是做什么的 编辑:程序博客网 时间:2024/06/05 09:58
React Native实现仿天猫商品类目列表
前段时间在群里有人问我,类似天猫类目分类这种列表怎么实现,其实这个类目不算复杂,只要清楚这两个列表之间的关系,选择好相应的组件,开发起来还是挺简单的,只是在开发中也有几个需要注意的小细节处理
效果图预览
Demo地址
https://github.com/guangqiang-liu/react-native-categoryListDemo
注意事项
- 根类目点击时,当类目列表超过一屏时,需要滚动到列表的顶部,并且也需要将右边的分类列表滚动到顶部,天猫的目录就是这种效果
- 控制页面的渲染时机,如果数据量很大,建议单独做些优化
- FlatList和SectionList数据源的组装
- 列表偏移量处理
核心源码
<FlatList ref={flatList => this._flatList = flatList} data={data} ListHeaderComponent={() => (<View/>)} ListFooterComponent={() => (<View/>)} ItemSeparatorComponent={() => <View style={{height:1, backgroundColor:'#F5F5F5'}}/>} renderItem={this._renderItem} onEndReachedThreshold={20} showsVerticalScrollIndicator={false} > </FlatList>
<SectionList ref={(ref) => this._sectionList = ref} renderSectionHeader={this.sectionComp} renderItem={(data) => this.renderItem(data)} sections={tempArr} ItemSeparatorComponent={() => <View/>} ListHeaderComponent={() => <View/>} ListFooterComponent={() => <View/>} showsVerticalScrollIndicator={false} keyExtractor={(item, index) => 'key' + index + item} />
// 设置列表的偏移量_renderItem = item => { let index = item.index let title = item.item.title return ( <TouchableOpacity key={index} style={[{alignItems: 'center', justifyContent: 'center', width: 100, height: 44}, this.state.selectedRootCate === index ? {backgroundColor: '#F5F5F5', borderLeftWidth: 3, borderLeftColor: 'red'} : {backgroundColor: 'white'}]} onPress={() => { (CateData.data.length - index) * 45 > height - 65 ? this._flatList.scrollToOffset({animated: true, offset: index * 45}) : null this._sectionList.scrollToLocation({itemIndex: 0, sectionIndex: 0, animated: true, viewOffset: 20}) this.setState({selectedRootCate: index}) }} > <Text style={{fontSize: 13, color: this.state.selectedRootCate === index ? 'red' : '#333'}}>{title}</Text> </TouchableOpacity> ) }
福利时间
- 作者React Native开源项目OneM地址(按照企业开发标准搭建框架完成开发的):https://github.com/guangqiang-liu/OneM 欢迎小伙伴们 star
- 作者React Native QQ技术交流群:620792950 欢迎小伙伴进群交流学习
- 作者整理的React Native 学习视频大礼包:https://pan.baidu.com/s/1kVcgUzl 提取码:ina5 有需要的小伙伴请拿走不谢
- 最后强调:开发中有遇到RN相关的技术问题,欢迎小伙伴加入交流群,在群里提问、互相交流学习。交流群也定期更新最新的RN学习资料给大家,谢谢支持!
作者:光强_上海
链接:http://www.jianshu.com/p/510f51fdf032
來源:简书
著作权归作者所有。商业转载请联系作者获得授权,非商业转载请注明出处。
阅读全文
0 0
- React Native实现仿天猫商品分类页面
- 【React Native 实战】商品分类
- react native中使用react-native-viewpager实现的商品展示添加点击事件
- react-native 页面切换的实现
- React-native页面跳转传值实现
- React Native-随笔分类
- react-native 页面跳转
- html5 商品分类页面效果
- React-Native学习笔记之:实现简单地登录页面
- react-native统一入口界面,并实现页面的跳转
- React Native Button实现
- react-native实现popwindow
- React Native Splashscreen实现
- react-native实现轮播图
- react-native页面的跳转
- 加载一个react native 页面
- 加载一个react native 页面
- React Native 仿登录页面
- eclipse新建maven web项目步骤、出现错误解决方法及maven settings简单配置
- 【廖雪峰 python教程 课后题 切片】利用切片操作,实现一个trim()函数,去除字符串首尾的空格,注意不要调用str的strip()方法:
- MOOC_人工智能原理学习笔记4
- 多流聚合与JSON全文检索的功能应用
- 获取登录成功的token
- React Native实现仿天猫商品分类页面
- 拟合与估计问题中的鲁棒方法
- tomcat远程调试
- <Android> 模态对话框
- java中&和&&
- request中getParameter和getAttribute的区别
- win7 sublime 构建 python 交互环境 IDLE 遇到的那些事儿
- Recheck Cond filter IO\CPU放大 原理与优化CASE
- Visual Studio项目目录和文件说明