前言
上一個項目天氣預(yù)報使用react-native提供的傳統(tǒng)state和props管理搭建項目, 這個則采用react-redux,redux搭建項目;兩者區(qū)別在天氣預(yù)報有詳細的講解主穗，本項目重點是redux,react-redux,react-navigation使用;
官方文檔
其中react-redux有許多中間件redux-thunk,react-logger等
個人學(xué)習(xí)中做的小Demo,有興趣可以共同學(xué)習(xí)一下
react-native-learn不斷更新中...
項目介紹
github源碼 react-native-food
功能
- 首頁推薦菜譜列表，熱門標(biāo)簽须眷，輪播圖顯示熱門推薦菜譜
- 導(dǎo)航條在滾動下隱藏,顯示（
Animated） - 自定義導(dǎo)航
- 分類（不同方式切換）二級列表
- 搜索菜譜 上拉加載, 下拉刷新
- 我的收藏
- 瀏覽記錄
- 菜譜詳情
- 菜譜制作步驟的大圖瀏覽
- ...
技術(shù)點
- 網(wǎng)絡(luò)請求的封裝
- Animated和滾動事件結(jié)合
- 輪播圖自定義分頁組件
- 上拉加載
- 下拉刷新
- 我的收藏征懈，瀏覽記錄的本地緩存
- 小圖點擊放大，支持手勢
- 二級列表的顯示和隱藏
- 自定義
tabBar - 自定義
navigationBar - 組件和
action的綁定等
項目截圖
安裝
git clone https://github.com/liuboshuo/react-native-food.git
npm install
運行客戶端
在android項目找到string.xml文件替換你申請的appKey
react-native run-android
在iOS項目找到pch文件替換你申請的appKey
react-native run-ios
項目使用框架
"dependencies": {
"immutable": "^3.8.1",
"qs":": "^6.5.0",
"react": "16.0.0-alpha.6",
"react-native": "0.44.0",
"react-native-swiper": "^1.5.4",
"react-navigation": "^1.0.0-beta.11",
"react-redux": "^5.0.4",
"redux": "^3.6.0",
"redux-thunk": "^2.2.0",
"react-native-storage":"^2.1.1",
"react-native-gallery":"0.0.17"
},
react-native-storage
一個本地持久存儲的封裝俏扩，可以同時支持react-native(AsyncStorage)和瀏覽器(localStorage)
這個框架的存儲內(nèi)容是文件存儲糜工，而且還是明文的，可以在iOS沙盒找到存儲文件录淡，打開后內(nèi)容一目了然捌木。這太不安全了；
所以,如果你的項目安全性比較高嫉戚，建議搭配加密的js框架一起使用刨裆。crypto-js
react-native-gallery
相冊墻
immutable
immutable可以說給react的app提高了性能,是很厲害的一個庫澈圈，可以飛升react開發(fā)的app的性能
-
react-native-swiper輪播
react-navigation
這個庫提供三種框架的搭建app
tabBar
navigator
drawer 側(cè)邊欄
redux-thunk
redux-thunk 是 redux 官方文檔中用到的異步組件
心得
- 使用
redux是有利于項目的搭建，和業(yè)務(wù)邏輯拆分帆啃，降低耦合度 - 在app中store管理的state是全局的瞬女，這導(dǎo)致在退出頁面的數(shù)據(jù)還存在內(nèi)存，這就需要在頁面退出的時候努潘，我們手動的清除緩存數(shù)據(jù)诽偷，以免再次進入頁面時，緩存數(shù)據(jù)還存在疯坤。
- 我們都知道web編寫style是一件繁瑣的事情报慕，雖然react-native的style比web的css更簡單。但是當(dāng)app復(fù)雜化的時候(比如管理皮膚)压怠，怎樣更方便去管理style是一個問題卖子？求解？
