寒假完毕了,在寒假时期玩了一下react-native,模拟豆瓣完成了一个检察当前热点影戏和行将上映影戏的简朴app,项目比较简朴,非常合适方才入门的同砚检察。
起首我们要相识react-native: react-native中文网、react-native官网,英语好的同砚固然引荐去后者react-native官网看啦,毕竟是官网,内容没有滞后性。
项目构造:
android // 编译获得的代码
api // 公用的api
|---api.js // 每一个页面公用的收集要求
components // 组件
|---col-movies.js // 首页纵向的影戏列表
|---flat-movies.js // 一切影戏页面影戏列表
|---scroll-movies.js // 首页横向影戏列表
page
|---all-movies.js // 一切影戏页面
|---bref-introduction.js // 影戏简介页面
|---cinemas.js // 四周影戏院页面
|---home.js // 首页
|---loading.js // 加载过渡页面
App.js // 运用进口
index.js // 注册运用
结果
首页:
检察悉数20部影戏:
检察影戏简介以及购票:
手艺栈
- react-native
- es6 (react-native自身支撑es6) Babel·learn es2015
- flexbox规划 (react-native默许采纳flexbox规划)
- 导航react-navigation 官网
接口
- 豆瓣供应的公然接口(行将上映和正在热映)
豆瓣公然接口 - 本身nodejs编写的接口(四周影戏院),可先疏忽此页面(购票页面)
const tempUrl = 'http://ip:3000/cinema' // 须要竖立当地服务器与数据库,ip改成本身的ip,可先无视本部份,关注react-native自身。
返回数据:
status: 0/1
msg: ”
list: object,接口以下表格
name | price | site |
---|---|---|
“最廉价的影戏院” | 25 | 出门右转二楼B栋101,102号卡位 |
本项目代码地点:
npm install 装置依靠
react-native run-android 在安卓真机上运转
react-native run-android --simulator 在模拟器上运转