一、 首先配置環境 當然是node 下用npm
然後建立項目
在電腦上啟動的安卓虛拟機 不能搖一搖,是以還需要在 cmd 裡輸入

在筆記本下啟動的虛拟機會比較卡可以設定如下,會稍微好點
二、需要實作的界面和功能如下
建立一個AppNavigator.js 檔案 用于首頁和詳情頁的跳轉
index.android.js 首先展示首頁
reactjs 寫樣式和傳統的css 有一定的差別,駝峰和沒有簡寫如(margin: 0 auto) 是沒有的,同時安卓機下是不能顯示出陰影的
首頁中的 卡片布局如下
卡片滑動swipe 效果
首頁抽屜效果
以上所用插件我都有改動 符合demo的需求····
通過這次的demo學習對react 有進一步的認識與體會,
元件的生命周期
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。
有需要合作的,可以加個好友