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

前端之家收集整理的这篇文章主要介绍了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 在模拟器上运行
原文链接:https://www.f2er.com/react/301911.html

猜你在找的React相关文章