android 仿ofo页面,GitHub - AndroidProject1212/react-native-ofo: React Native 仿 ofo 共享单车 App...
本文为 Marno 原创,转载必须保留出处!
公众号【 aMarno 】,关注后回复 RN 加入交流群
React Native 优秀开源项目大全:http://www.marno.cn
一、前言
并没有实现 ofo 所有功能,只完成了主要的界面和逻辑,感觉其中也就【地图】和【扫码】两个比较核心的功能还需要花点时间以外,其他的就都比较简单了,而且由于没有API,模拟数据也没啥意思,所以就没有写那么完整。
地图: 用的是高德的 JS 地图,我在之前的一片文章中《Android快速实现地图功能(不仅快!而且小!)》有提到过这样的实现方式,感兴趣的朋友可以点过去看一下,只不过这一次用到了更多的功能而已。使用 JS 地图代替原生地图的好处就是不用再处理麻烦的依赖包关系,但是缺点就是性能要比原生地图差。但是实际使用下来,也还是能达到正常使用的级别,不至于完全没法用。
扫码: 的功能是基于 react-native-camera 开源库进行的二次开发,前段时间我也将其封装成了开源组件,上传到了 NPM 服务器,可以直接通过 npm install ac-qrcode --save 进行安装使用,有需要的朋友可以到我 github 主页进行查看,或者在我博客之前的文章里找下,
二、截图预览
首页
个人中心
扫码
三、技术框架
"react": "16.0.0-alpha.6"
"react-native": "0.43.1"
"native-base": "^2.1.1"(综合框架)
"react-navigation": "^1.0.0-beta.7"(导航)
"ac-qrcode": "^1.0.0"(扫码组件)
"react-native-simple-toast": "0.0.5"(吐司)
项目运行步骤如下:
第一步:npm install
第二步:react-native link
第三步:react-native run-android(或 run-ios)
理论兼容 Andorid / iOS,但没在 iOS 真机上试过,只在虚拟机上试了下。
需要特别声明一下,因为用到了 “react-navigation”,在 RN 0.43 上会报错,虽然在 RN 0.44 中已经进行了修复,但是我还没有升级版本。暂时的解决办法可以到这里看下:https://github.com/react-community/react-navigation/issues/923
五、项目心得
按照惯例,每完成一个仿写项目,我还是喜欢进行一下总结。
这个是我开源的第二个用 RN 仿写的的项目了,所以无论是对 RN 的理解还是使用上,相对之前开源 react-native-eyepetizer 的时候有了一些进步,而且中间还在不断学习一些 React 的知识,去深入理解组件生命周期,并以此作为着手点进行性能的优化,这部分内容后面我也会整理成文章分享出来。
回到这次开源的项目上来,最明显的就是关于分包结构的调整,之前在仿写开眼的时候,并没有考虑那么多,想的就是先入门再说。但是随着学习的深入,需要处理的逻辑逐渐复杂,合理清晰的管理代码是十分有必要的。
仿开眼项目包结构
仿ofo项目包结构
直接用上面的两张图做了个简单的对比,总结下就是:
存放页面的文件夹命名从 pages 改为 screens
页面中组件的样式用单独文件进行管理,采用 ”页面名+Styles“方式命名,如:HomeScreenStyles ,方便样式的复用和管理。
需要复用的组件抽取成单独一个类,存放到 components 包中。
图片、常量、颜色、公共样式等资源,分别用一个入口类管理,就和 Android 中管理资源的做法类似,这样更易维护。
最后说一下为啥没有用 Redux
一、觉得项目还不算复杂,没有必要使用 Redux
二、如果只是管理状态,Mobx 使用要简单点
三、好吧,我说实话,因为我还不太会。
android 仿ofo页面,GitHub - AndroidProject1212/react-native-ofo: React Native 仿 ofo 共享单车 App...相关推荐
- React Native 仿 ofo 共享单车 App
本文为 Marno 原创,转载必须保留出处! 公众号[ aMarno ],关注后回复 RN 加入交流群 React Native 优秀开源项目大全:http://www.marno.cn http:/ ...
- android 仿ofo页面,ReactNative 仿造 ofo 共享单车快速开发的app
ofo ReactNative 仿版(主要是做 iOS版本) 原因 之前一直想做个 ReactNative 关于地图相关的 demo ,然后近两天在群里看见有人发的 RN 做的 ofo 共享单车的仿版 ...
- android扫码支付宝ofo,六大共享单车接入支付宝 ofo等免押金扫一扫可骑走
原标题:六大共享单车接入支付宝 ofo等免押金扫一扫可骑走 毫无疑问,共享单车的出现,极大的便利了我们的日常生活,解决了很多短途行程的问题,很多年轻人热衷于共享单车.不过,作为新鲜事物,共享单车还是存 ...
- 共享单车登录显示服务器未响应,ofo共享单车服务为什么出现故障
满意答案 lxnqc 2017.04.29 采纳率:47% 等级:13 已帮助:5893人 ofo共享单车坏了的应对方式 发现ofo共享单车坏了 应立即停车检查 1,当ofo共享单车在使用过程中 ...
- ofo“卖身”滴滴?共享单车开始进入下半场
战斗到最后一刻? 昨天,就ofo被滴滴收购一事,滴滴官方表示,不予置评,而ofo联合创始人则发表公开声明:皆为不实消息. 在这篇声明中,ofo依然在强调:ofo是"共享单车行业领军者和目前唯 ...
- ofo创始人戴威称共享单车日收入接近1000万
导读 共享单车ofo近来频频牵手传统企业,继上周与中信银行(601998,股吧)达成合作,联名卡用户免99元用车押金后,今日ofo正式宣布与传统自行车生产商天津邦德富士达展开合作,双方将成立产品研发中 ...
- 1年20国!ofo用共享单车能否冲破海外流量魔障
以ofo为代表的中国原创共享单车,正在"骑"向全球各地.12月7日,ofo小黄车宣布入驻法国巴黎,正式进入全球第20个国家,提前完成出海目标.目前ofo已在全球超250座城市开展运 ...
- android 仿ofo页面,[Android进阶]OFO首页实现小窥
[Android进阶]OFO首页实现小窥 个人微信公众号,欢迎大家加入. [图片上传失败...(image-81989-1544605445241)] 最近阅读量凄凄惨惨,难以为继,孤倍感无力,遂决定 ...
- android 仿ofo页面,微信小程序_模仿共享单车ofo源代码
[实例简介] 功能:登陆 定位及地图查看 轮播图广告 我的行程及列表 我的钱包及查看交易明细 [实例截图] [核心代码] 模仿共享单车ofo(微信小程序源代码) └── 模仿共享单车ofo(微信小程序 ...
- android listview 滚动条隐藏,隐藏滚动条在FlatList(React Native)中Android
我想在我的应用程序中使用FlatList(React-native).我正在水平使用它并可以看到滚动条.在ScrollView中有一个选项来隐藏滚动条,但不在FlatList中.有没有人能够以其他方式 ...
最新文章
- XFire发布Web Services
- Linux美化——终端提示符
- php 导出csv 转义 逗号转义,在csv php中转义换行符
- 云服务器 VNC 远程连接
- apache支持mysql ubuntu_Ubuntu+Apache+PHP+Mysql环境搭建(完整版)
- 修复版超强大微信小程序源码-内含几十款功能王者战力查询
- 智·御未来 亚信安全巡展·2017即将起航
- HENXU-SOA的业务规划和建模方法之八——组件化业务模型(CBM)介绍
- java wsdl 服务端代码_wsdl2java 生成 webservice服务端代码:
- 人智导(二十):知识表示与自动推理(Ⅲ)
- 技能分享:扩展名怎么修改?
- My SQL中PK、NN、UQ、BIN、UN、ZF、AI、G所代表的意义
- java学习总结(16.07.16)Random类和BigDecimal类
- VS2019中Git源代码管理总结
- 21世纪十大热门编程语言大集合,看你适合哪一种?
- 服务器状态502 503 504,服务器错误500/502/503/504详解
- 微博数据爬虫——获取特定ID的热门转发用户列表(五)
- 登录过期--localStorage加sessionStorage实现7天登录过期
- jeetsite 4.0 框架搭建入门
- efm8bb1 烧录器_EFM8BB1_DataSheet-CN.pdf
热门文章
- ZOJ 3429 Cube Simulation (思维题)
- 正则表达式删除字符串中 html 标签
- Android画布和图形绘制---Canvas and Drawables
- Java中构造方法被别封装后的调用
- 在Sharepoint2010配置SMTP服务
- C语言常量定义#define和const区别解析
- php如何获取当前的cookie,怎么获取cookie的值
- linux信号处理编程实验报告,实验二进程通信-Linux实验报告
- 头文件自包含是什么意思_女朋友发了一张这样的自拍给我,说想我了,她这是什么意思呢?...
- java c md5 疯_JAVA md5把我气到疯的代码,天哪,神呀,我的C# 啊。