react-native電影簡介app,瞭解一下?(android端)

寒假結束了,在寒假期間玩了一下react-native,模仿豆瓣實現了一個查看當前熱門電影和即將上映電影的簡單app,項目比較簡單,十分適合剛剛入門的同窗查看。
首先咱們要了解react-native: react-native中文網react-native官網,英語好的同窗固然推薦去後者react-native官網看啦,畢竟是官網,內容沒有滯後性。node

項目結構:

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

name price site
"最便宜的電影院" 25 出門右轉二樓B棟101,102號卡位

本項目代碼地址:

項目源碼android

npm install 安裝依賴

react-native run-android 在安卓真機上運行
react-native run-android --simulator 在模擬器上運行
相關文章
相關標籤/搜索