【稀饭】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具体的相关知识,只是简单的介绍了下这个系列相关的一个小项目概况,下一节,将讲述首页数据的请求解析并展示及运用到的相关技术。

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

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

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

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

概述本文是基于目前公司的一个真实项目编写的,由于是边实践边记录,遇到什么问题和如何解决的,所以你看这篇文章的时候,可能有时候会觉得不是很流畅,特此说明。引入React Nativebuild.grad...
  • a631855639
  • a631855639
  • 2016年10月11日 16:36
  • 3925

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

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

React Native项目组织结构介绍

代码组织:目录结构:. ├── components //组成应用的各个组件 │   ├── Routers.android.js //每个组件若实现不一样,分为android的实现和i...
  • xiangzhihong8
  • xiangzhihong8
  • 2016年09月28日 18:57
  • 7354

React Native视频教程电商项目实战教学

下载地址:http://www.feixueteam.net/thread-1034-1-1.html
  • u013948181
  • u013948181
  • 2016年12月16日 16:07
  • 1326

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

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

【稀饭】react native 实战系列教程之Navigator实现页面跳转

主界面开发上一节,我们已经完成了首页的开发,现在,我们继续完成主界面的开发,就是添加底部‘首页’和‘我的’两个tabbar。在js/文件夹下,新建MainScene.js文件import React,...
  • a631855639
  • a631855639
  • 2016年09月18日 14:59
  • 2716

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

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

【稀饭】react native 实战系列教程之影片数据获取并解析

获取网络数据在上一节,我们已经通过模拟数据,并将UI展示出来。这节我们将获取网络数据。数据来源于网络,仅用于学习使用。fetch介绍fetch是react native的一个网络请求库,使用该库不用引...
  • a631855639
  • a631855639
  • 2016年08月31日 14:58
  • 2897

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

首页设计与实现首先,这章节讲的是首页内容的设计与实现,不包括主界面的设计,因为一开始入手,我希望能立马获取到数据并能展示出来,后面再来搭木积似的一步一步把整体框架做起来。设计(图丑,莫见怪~)主界面的...
  • a631855639
  • a631855639
  • 2016年08月26日 10:57
  • 2133
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:【稀饭】react native 实战系列教程之项目介绍
举报原因:
原因补充:

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