react-native影戏简介app,相识一下?(android端)

寒假完毕了,在寒假时期玩了一下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                // 注册运用

结果

首页:

《react-native影戏简介app,相识一下?(android端)》

检察悉数20部影戏:

《react-native影戏简介app,相识一下?(android端)》

检察影戏简介以及购票:

《react-native影戏简介app,相识一下?(android端)》

手艺栈

  • 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,接口以下表格

namepricesite
“最廉价的影戏院”25出门右转二楼B栋101,102号卡位

本项目代码地点:

项目源码

npm install 装置依靠

react-native run-android 在安卓真机上运转
react-native run-android --simulator 在模拟器上运转
    原文作者:holyZhengs
    原文地址: https://segmentfault.com/a/1190000013360771
    本文转自网络文章,转载此文章仅为分享知识,如有侵权,请联系博主进行删除。
点赞