脚本宝典收集整理的这篇文章主要介绍了

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                // 注册应用

效果

首页:

图片描述

查看全部20部电影:

图片描述

查看电影简介以及购票:

图片描述

技术栈

接口

  • 豆瓣提供的公开接口(即将上映和正在热映)
    豆瓣公开接口
  • 自己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 在模拟器上运行

总结

以上是脚本宝典为你收集整理的

react-native电影简介app,了解一下?(android端)

全部内容,希望文章能够帮你解决

react-native电影简介app,了解一下?(android端)

所遇到的程序开发问题,欢迎加入QQ群277859234一起讨论学习。如果觉得脚本宝典网站内容还不错,欢迎将脚本宝典网站推荐给程序员好友。 本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。

80%的人都看过