天天看點

react native 學習之模仿”探探“實作豆瓣電影app部分功能

一、 首先配置環境 當然是node 下用npm  

然後建立項目

在電腦上啟動的安卓虛拟機 不能搖一搖,是以還需要在 cmd 裡輸入  

react native 學習之模仿”探探“實作豆瓣電影app部分功能

在筆記本下啟動的虛拟機會比較卡可以設定如下,會稍微好點 

react native 學習之模仿”探探“實作豆瓣電影app部分功能

二、需要實作的界面和功能如下

react native 學習之模仿”探探“實作豆瓣電影app部分功能
react native 學習之模仿”探探“實作豆瓣電影app部分功能

建立一個AppNavigator.js 檔案 用于首頁和詳情頁的跳轉

index.android.js  首先展示首頁

reactjs 寫樣式和傳統的css 有一定的差別,駝峰和沒有簡寫如(margin: 0 auto) 是沒有的,同時安卓機下是不能顯示出陰影的

首頁中的  卡片布局如下

react native 學習之模仿”探探“實作豆瓣電影app部分功能

卡片滑動swipe 效果

首頁抽屜效果 

react native 學習之模仿”探探“實作豆瓣電影app部分功能

以上所用插件我都有改動 符合demo的需求····

通過這次的demo學習對react 有進一步的認識與體會,

元件的生命周期

react native 學習之模仿”探探“實作豆瓣電影app部分功能

componentWillReceiveProps(nextProps){} 接收新的資料 

 shouldComponentUpdate(nextProps, nextState){ return  boo} 必須有傳回值, 傳回 false componentWillUpdate()不會被調用 render()也再不執行 ,這樣根據需要可以禁止頁面的更新。

react native事件捕獲 

onStartShouldSetPanResponderCapture, onMoveShouldSetPanResponderCapture連個方法都有傳回值, 傳回true 時,事件就不再傳遞,被目前元件劫持并調用目前元件的onResponderStart或者onResponderRlase等

資料請求利用 facth 比傳統ajax 更簡潔 當然屬于es6 的

 state 更新 用setState 當然也可以用 如

forceUpdate就是重新render。有變量不在state上,缺又想更新state,重新整理render;或者state裡的某個變量層次太深,更新的時候沒有自動觸發render。這些時候都可以手動調用forceUpdate自動觸發render。

有需要合作的,可以加個好友

react native 學習之模仿”探探“實作豆瓣電影app部分功能