APP無難事伶棒，只怕有心人
今天我們來看看如何快速搭建自己的APP旺垒，而且用上流行的數(shù)據(jù)流解決方案、導航方案肤无。
一先蒋、技術(shù)棧
如果你對這里的技術(shù)棧感到困惑，大可不必擔心宛渐，跳過這里竞漾，直接上手下面的的Demo(例子)，并不影響你搭建這個APP窥翩。因為我們會用一個腳手架一次安裝沫换，而不是一個一個安裝岁诉。
當你熟練使用下面的Demo的開發(fā)語言和邏輯時犹撒，再回過頭來开缎，慢慢掌握這里的技術(shù)棧，你也許會收獲更多仗岸。
1. React-Native
跨平臺(ios + android)的facebook推的一款用JavaScript 和 React構(gòu)建APP的框架
React-Native官網(wǎng)
2. Redux
Redux 是一個供JavaScript 應(yīng)用使用的可預測的狀態(tài)容器
說白了允耿，就是給你統(tǒng)一存數(shù)據(jù)的地方，類似的還有搭配Vue使用的Vuex
Redux github文檔
3. Redux-Saga
Redux-Saga是一個庫扒怖，致力于使副作用(side effects)的操作能更好地被管理右犹、高效執(zhí)行、容易測試姚垃、處理錯誤念链。 這里的副作用指的是，比如異步獲取數(shù)據(jù)，或者可能會失敗的獲取瀏覽器緩存 這類的操作掂墓。
4. React-Router
React-Router 是一個聲明式的React路由谦纱，能方便地進行頁面跳轉(zhuǎn)等。
5. React-Navigation
React-Navigation 也是用來做路由的君编，和React-Router不同的是：
React-Router 可以把Route當作組件跨嘉，在不同的地方直接定義路由 (動態(tài)路由)
React-Navigation 需要提前在一個地方配置好所有的路由 (靜態(tài)路由)
注意：我們demo用的腳手架，暫時(2019/6/22) 用的是2.x的React-Navigation吃嘿，如果你想用3.x祠乃，需要自己調(diào)整（如果你不想修改，請忽略）
6. dva
基于 redux兑燥、redux-saga 和 react-router 的輕量級前端框架亮瓷。
它把這些好用的東西都整合在一起。
官方提到的特性：
- 易學易用降瞳，僅有 6 個 api嘱支，對 redux 用戶尤其友好，配合 umi 使用后更是降低為 0 API
- elm 概念挣饥，通過 reducers, effects 和 subscriptions 組織 model
- 插件機制除师，比如 dva-loading 可以自動處理 loading 狀態(tài)，不用一遍遍地寫 showLoading 和 hideLoading
- 支持 HMR扔枫，基于 babel-plugin-dva-hmr 實現(xiàn) components汛聚、routes 和 models 的 HMR
具體見 dva github文檔
你也可以看看這里的 dva入門課
7. react-native-dva-starter
是一個基于dva和react-navigation的React Native啟動器
具體見 react-native-dva-starter github文檔
二、Demo
現(xiàn)在我們使用dva-native-cli這個腳手架短荐，簡單高效地創(chuàng)建一個app
1. 安裝腳手架
yarn global add dva-native-cli // yarn全局安裝腳手架
或者 npm install dva-native-cli -g // npm全局安裝腳手架
2. 新建項目
// 使用腳手架的dvanative git命令創(chuàng)建一個名字叫demo的app
// (你可以把demo修改成其他的app名字)
dvanative git demo
3. 進入項目目錄
cd demo // 我這里的項目目錄是demo
如果你對怎么在手機上啟動React-Native項目不了解倚舀，或者還沒有React-Native的開發(fā)環(huán)境，請先按照這里的教程一步一步搭建：React-Native環(huán)境搭建
搭建完之后搓侄，連接真機 或者 打開模擬器，之后運行下面的啟動命令：
react-native run-ios // 啟動ios
或者 react-native run-android // 啟動android
這里會打開一個react-native packager命令行窗口话速，不要關(guān)閉這個命令行窗口
在原來的命令行窗口中讶踪，
- 正確提示如下
react-native run-ios:
react-native run-android:
圖片中，emulator-5554是安卓模擬器的名字
三. 常見錯誤提示
- React-Native環(huán)境搭建不正確 或 沒有正確連接機器:
如果你遇到上面的報錯泊交，很可能你沒有搭建好React-Native的開發(fā)環(huán)境乳讥，或者沒有連接真機或模擬器，請關(guān)閉所有的命令行窗口廓俭，再次檢查自己的環(huán)境是否符合React-Native環(huán)境搭建的內(nèi)容云石，再執(zhí)行此步驟。
- 沒有配置命令行工具路徑
如果你遇到上面的報錯研乒，如圖汹忠，打開：
Xcode > Preferences > Locations
很可能這里沒有選中任何工具，隨便選中一個下拉選項，再次運行命令即可宽菜。
四. 效果圖
恭喜你谣膳，你的app搭建完成，里面內(nèi)置了一些頁面铅乡，效果如下：
現(xiàn)在你可以開發(fā)一些頁面继谚，或者對照項目中原有的代碼，深入了解一下上面提到的技術(shù)棧阵幸。祝你學習愉快花履！
（完）
