RN开发实践——仿携程App(三)
来源:互联网 发布:js比较字符串 编辑:程序博客网 时间:2024/05/16 19:30
文章最后附上源码地址
上一片博客链接RN开发实践——仿携程App(二)
实现首页中间的内容栏
今天实现首页中间的内容栏,原效果如下:
红框就是今天需要实现的内容
这里可以拆解成四个部分,每个部分都是由相同组件,填充不同内容来实现。
简单布局的实现
在homebean首页json数据中,设置了一个itemBeans的集合数据,存放着我们需要实现的四个部分组件的数据。
在homepage中遍历itemBeans这个集合数据,并简单的创建四个View组件,预先占位,后面再逐一实现。
定义一个CenterBar组件
创建CenterBar的组件,这个组件就是四个部分的组件了。
使用CenterBar这个组件
在homepage中使用CenterBar这个组件替换掉遍历创建的View组件
传数据到CenterBar组件中
1.传递数据到CenterBar中
CenterBar设置一个属性了itemBean来接收itemBeans数据中对应item对象内容。
2.CenterBar接收数据
在CenterBar通过this.props.itemBean来获取接受到的itemBean数据
//接收数据var itemBean=this.props.itemBean;
实现CenterBar布局
1.布局的搭建
接收完数据,开始CenterBar布局搭建,这里拆分下结构,如图:
分为左中右结构,中间和右边部分又分为上下结构。
设置属性flexDirection为横向布局row,给左中右三部分设置对应的样式,设置flex属性(类似权重属性),宽度比例为1:1:1。
2.完善中间和右边布局
给每一项填充对应数据。
因为中间和右边代码一致,抽取重复的代码,只需传入对应的index值,获取对应数据即可。
3.完善中、右布局对应的样式
- 给每一项添加背景,这里通过itemBean数据中有个bgColor的值,给不同item设置不同背景颜色
- 设置字体居中和大小
- 添加白色边框
4.完善左边内容
在itembean数据有个type的值用来区分两种类型的item,用来区分item左边部分不同的布局。
- 添加左边的布局结构
- 完善左边的布局
- 修改布局样式
- 修改图片和文字样式
最终效果如下:
最后附上项目地址
阅读全文
0 0
- RN开发实践——仿携程App(三)
- RN开发实践——仿携程App(一)
- RN开发实践——仿携程App(二)
- RN开发实践——仿携程App(四)
- RN布局(三)——伸缩项目的属性
- 敏捷实践总结(三)——Scrum敏捷开发
- ReactNative开发——RN与android Native交互初探
- RN(React Native)开发Android App的新技术?
- App后台开发运维和架构实践学习总结(1)——App后台核心技术之用户验证方案
- App后台开发运维和架构实践学习总结(4)——APP的注册和登录功能设计
- App后台开发运维和架构实践学习总结(6)——App客户端与后台交互方式总结
- App压力测试——(实践)
- Ubuntu字典app开发(二)——探索与实践
- App后台开发运维和架构实践学习总结(7)——RESTful API 设计规范
- RN学习1——前奏,app插件化和热更新的探索
- RN开发问题总结(一)
- RN学习和开发笔记(一)
- rn——小心得
- js内存泄露的几种情况
- hadoop 分片与分块,map task和reduce task的理解
- Resource interpreted as Stylesheet but transferred with MIME type text/plain
- api接口调用实例(response json_encode json)创建展视互动直播间,
- BigDecimal(double)” should not be used
- RN开发实践——仿携程App(三)
- Java Collections.EMPTY_LIST 和 Collections.emptyList()的区别
- LeetCode LinkedList 系列解集
- 我的前半生:贺涵暴露20条职场残酷真相
- [计算机组成原理]--关于typing(类型指派)
- Map集合中value()方法与keySet()、entrySet()区别
- 重写equals步骤及一些例子
- form表单的基本用法
- [CTF]No.0002 莫桑比克-php是最好的语言(待完善)