react-native电影简介app，了解一下？（android端）

RayKr 发布于2019-08-26 11:48 / 3301人阅读

摘要：寒假结束了，在寒假期间玩了一下，模仿豆瓣实现了一个查看当前热门电影和即将上映电影的简单，项目比较简单，十分适合刚刚入门的同学查看。

寒假结束了，在寒假期间玩了一下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 在模拟器上运行

云服务器混合云电影简介人工智能电影简介 app端口号 react-native

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/107616.html

NativeScript-Vue，了解一下？

摘要：今天偶尔再打开的官网，发现首页部分多出了这一选项可见官方对于与的结合是非常的支持的。，这个模板是目前最稳定和多功能的模板，可以使用单文件组件，，。但是不管怎样，与的结合是一件很酷的事情，也希望它能够快速发展起来。 What is NativeScript? NativeScript 是一个可以让你用Typescript或JavaScript开发原生ios或android app的开源框...

seal_de 2019-08-22 14:58 评论0 收藏0
电影天堂React Native 客户端V2.0发布

摘要：电影天堂客户端重新开始具体更新以为准。重新开始两年前发布了第一个版本。最为一名偏体验偏设计的前端开发者，对界面和用户体验都有极高的重视。电影天堂React Native 客户端重新开始！具体更新以https://github.com/XboxYan/DYTT为准。重新开始两年前发布了第一个版本。现在，使用最新的react-native 0.57和全新的设计完成了V2.0 ...

MockingBird 2019-08-23 14:08 评论0 收藏0
React Native 简介：用 JavaScript 搭建 iOS 应用 (1)

摘要：利用来搭建代码。虽然这不是安装的唯一方式，但我发现，是非常好用的包管理器。终端窗口打开后，会启动，并由服务器处理以上请求。面对这种情况时，需要关闭终端窗口，停止在上的应用，并重新运行。使用设定应用的用户界面。命名这两个文件为和。【编者按】本篇文章的作者是 Joyce Echessa——渥合数位服务创办人，毕业于台湾大学，近年来专注于协助客户进行 App 软体以及网站开发。本篇文章中，...

xiaoqibTn 2019-08-21 10:37 评论0 收藏0