【稀饭】react native 实战系列教程之项目介绍

原创 2016年08月24日 16:24:50

写之前

当你在看该系列教程时,我想你应该和我一样起码是有些基础了。本人是Android原生开发的,业余时间学习了下react native。学习的初衷是:很多时候,移动开发要求既要会Android也要会IOS(最好),但是学习IOS的成本摆在那里,然后听说react native开发使用js语言做移动开发,包括Android和IOS,本着对新技术极度好奇之孜孜以求,我就打开react native中文网,开始一步一步的迈进react native 大门。

这个系列,是我边学习边写的一个APP项目,项目不大,很小,但是涉及到的点蛮多的,包括页面间切换、传数据,ListView、webview、组件的封装、使用原生平台的能力等等。如果,过程中有什么错误的地方请指出,我也是在学习的过程,多多指教。

最后,为什么要用写项目的方式来学习?这是我学习的一个方法,总感觉看书看视频学习,有些知识点理解起来总是那么的生硬,不如自己动手写写代码,这过程中,遇到的问题会让你加深对知识点的理解,遇到问题->解决问题->提升能力,再看看成果一点一点的起来,会有满满的成就感,这就是学习的动力。

项目介绍

上面有点啰嗦了,这节总体介绍下【稀饭】这个应用会包括哪些功能吧。【稀饭】是通过抓取网络上和韩剧相关的数据,并通过使用cheerio库解析html,进行数据展示的一个小应用。本例子用于学习相关使用,若侵犯到您的权利,请联系我,侵删。 上图:

首页

首页进来顶部有个TitleBar、内容有最新和最热Tab列表、底部有首页和我的选项卡,点击列表item项进入详情,我的界面暂不实现具体功能,只是为了展示页面导航和Tab的实现。上图:

详情

详情包括,顶部影片信息,下面分为剧集和简介。

总体概况如下图:

项目总体概况

最后上个效果图吧!

效果图

代码已经提交到github,可以下载来看看 项目地址

总结

这章节并没有讲react native具体的相关知识,只是简单的介绍了下这个系列相关的一个小项目概况,下一节,将讲述首页数据的请求解析并展示及运用到的相关技术。

版权声明:本文为博主原创文章,未经博主允许不得转载。

相关文章推荐

jquery 面包屑导航

YanCms左侧导航栏

Node.js开发入门—套接字(socket)编程

Node.js的net模块提供了socket编程接口,方便我们利用较为底层的套接字接口来实现应用协议。这次我们看一个简单的回显服务器示例,包括服务端和客户端的代码。...
  • foruok
  • foruok
  • 2015年09月14日 06:51
  • 11182

【稀饭】react native 实战系列教程之项目初始化

项目前期准备工作本系列课程实战,默认是你已经安装好react native所需的一切环境配置,如果你还没配置好,请事先看下中文官网。这里提一下,如果你在安装Chocolatey过程中出错了,一般是权限...

【稀饭】react native 实战系列教程之热更新原理分析与实现

很多人在技术选型的时候,会选择RN是因为它具有热更新,而且这是它的一个特性,所以实现起来会相对比较简单,不像原生那样,原生的热更新是一个大工程。那就目前来看,RN的热更新方案已有的,有微软的CodeP...

【稀饭】react native 实战系列教程之首页列表UI实现

首页设计与实现首先,这章节讲的是首页内容的设计与实现,不包括主界面的设计,因为一开始入手,我希望能立马获取到数据并能展示出来,后面再来搭木积似的一步一步把整体框架做起来。设计(图丑,莫见怪~)主界面的...

【稀饭】react native 实战系列教程之完成首页

首页功能前面,我们已经完成了影视信息组件的开发,接下来,我们要用该组件来完成首页界面功能的开发,如下图可以看到,首页顶部一个标题栏,下面是‘最新’、‘最热’两个选项卡。我们要完成的有标题栏、选项卡、以...

【稀饭】react native 实战系列教程之数据存储

概述在开发一款APP,对于数据的存储是在正常不过了,在此之前,【稀饭】这个应用还没有用到存储数据的地方,为了学习研究React Native的数据存储,打算给应用增加【我的收藏】和【观看历史】这两个功...

【稀饭】react native 实战系列教程之自定义原生模块

影片详情开发也是通过Cheerio抓取并分析网页获取到的详情数据,本节就不作为详细内容来讲解了,详细的代码可以看下我的github,效果如下:在点击播放时,会跳转到播放界面,并且横屏显示,退出播放界面...

【稀饭】react native 实战系列教程之自定义原生UI组件

上一节,讲了关于RN的自定义原生模块,本节是关于自定义原生UI组件,学习完本节,你将了解到原生UI组件的开发流程,以及js如何向native发送命令和native如何向js发送事件。原生UI组件之Vi...

【稀饭】react native 系列教程之已有项目接入React Native

概述 本文是基于目前公司的一个真实项目编写的,由于是边实践边记录,遇到什么问题和如何解决的,所以你看这篇文章的时候,可能有时候会觉得不是很流畅,特此说明。 引入React Native buil...
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:【稀饭】react native 实战系列教程之项目介绍
举报原因:
原因补充:

(最多只允许输入30个字)