寒假结束了，在寒假期间玩了一下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，接口如下表格

本项目代码地址：

项目源码

npm install 安装依赖

react-native run-android 在安卓真机上运行
react-native run-android --simulator 在模拟器上运行