前言

上一個項目天氣預報使用react-native提供的傳統(tǒng)state和props管理搭建項目, 這個則采用react-redux,redux搭建項目;兩者區(qū)別在天氣預報有詳細的講解，本項目重點是redux,react-redux,react-navigation使用;

官方文檔

• redux
• react-redux
• react-navigation

其中react-redux有許多中間件redux-thunk,react-logger等

個人學習中做的小Demo,有興趣可以共同學習一下
react-native-learn不斷更新中...

項目介紹

github源碼 react-native-food

功能

• 首頁推薦菜譜列表，熱門標簽，輪播圖顯示熱門推薦菜譜
• 導航條在滾動下隱藏,顯示（Animated）
• 自定義導航
• 分類（不同方式切換）二級列表
• 搜索菜譜 上拉加載, 下拉刷新
• 我的收藏
• 瀏覽記錄
• 菜譜詳情
• 菜譜制作步驟的大圖瀏覽
• ...

技術點

• 網(wǎng)絡請求的封裝
• Animated和滾動事件結合
• 輪播圖自定義分頁組件
• 上拉加載
• 下拉刷新
• 我的收藏，瀏覽記錄的本地緩存
• 小圖點擊放大，支持手勢
• 二級列表的顯示和隱藏
• 自定義tabBar
• 自定義navigationBar
• 組件和action的綁定等

項目截圖

安裝

git clone https://github.com/liuboshuo/react-native-food.git

npm install

運行客戶端

數(shù)據(jù)來源

在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-storage

一個本地持久存儲的封裝，可以同時支持react-native(AsyncStorage)和瀏覽器(localStorage)
這個框架的存儲內容是文件存儲，而且還是明文的，可以在iOS沙盒找到存儲文件，打開后內容一目了然。這太不安全了；

所以,如果你的項目安全性比較高，建議搭配加密的js框架一起使用。crypto-js

• react-native-gallery

react-native-gallery

相冊墻

• immutable

immutable

immutable可以說給react的app提高了性能,是很厲害的一個庫，可以飛升react開發(fā)的app的性能

• react-native-swiper輪播

react-native-swiper

• react-navigation

react-navigation

這個庫提供三種框架的搭建app

• tabBar

• navigator

• drawer 側邊欄

• redux-thunk

redux-thunk

redux-thunk 是 redux 官方文檔中用到的異步組件

心得

• 使用redux是有利于項目的搭建，和業(yè)務邏輯拆分，降低耦合度
• 在app中store管理的state是全局的，這導致在退出頁面的數(shù)據(jù)還存在內存，這就需要在頁面退出的時候，我們手動的清除緩存數(shù)據(jù)，以免再次進入頁面時，緩存數(shù)據(jù)還存在。
• 我們都知道web編寫style是一件繁瑣的事情，雖然react-native的style比web的css更簡單。但是當app復雜化的時候(比如管理皮膚)，怎樣更方便去管理style是一個問題？求解？