你可以了解到
- 從環境搭建到真機運行第一個RN項目
- RN項目的一般工程結構
- 基本xcode，ios模擬器操作
- 調試方法
- 工具選用和一些小技巧
mac OS 環境配置
開發環境
brew install node # node
brew install node
個人建議去官網下載LTS（Long-term Support官方長期支持）版本， https://nodejs.org/en/
brew install watchman # watchman 監控項目文件是否改動，用作 hot reload 等
npm install -g react-native-cli # 安裝react-native node 項目，使用npm包
echo "registry=https://registry.npm.taobao.org" > ~/.npmrc # 使用淘寶源
檢查
node -v # 版本 >= 4, 建議使用最新 LTS目前v6.9.4
watchman -v # 目前版本是 4.7.0
react-native -v # 目前 2.0.1
cat ~/.npmrc # 輸出registry=https://registry.npm.taobao.org
安裝xcode 和 運行環境
- 安裝或升級 xcode 至最新版本
- 打開 xcode，cmd + shift + 2，simulator模擬器
- 沒有想要的Simulator OS版本需要自行下載，(React Native 支持 iOS 8.0 以上)，這里以為10.2示例
- 真機調試：解鎖狀態下，連接數據線，并且每次編譯運行程序也都需要解鎖
安裝了XCode，但是大部分開發工作都不在 XCode 完成，我們需要一個IDE，可選的IDE有：
- 推薦 WebStorm http://www.jetbrains.com/webstorm/ 30天免費試用，一般試用完就新版可以卸載重新安裝，或者免費試用他家測試版本，或者付費使用。
- Sublime 很多前端工程師的IDE首選
- facebook 自家的 nuclide https://nuclide.io/ atom + nuclide插件，但并不好用，配置麻煩。
so，為了能專注于React Native開發，請優先使用 WebStorm。
?
初始化項目
這里使用 myproject 作為項目名稱，（初始化后更改較麻煩）
mkdir -p /data/app
cd /data/app
react-native init myproject # 大約1分半,
運行
命令行運行 myproject 工程
cd /data/app/myproject
react-native run-ios
xcode 運行
cd /data/app/myproject
open ios/myproject.xcodeproj
點擊左上角三角形"運行"按鈕
如果需要在真機調試，還需要做如下操作：
- bundle identifier 設置唯一的id
- signing 勾選Automatically manage signing
- Team 選擇自己的appid
xcode 剛剛開啟項目，狀態欄會有 Indexing | Processing files， 插入手機，狀態欄也會有 is busy processing symbol files, 直接點擊運行以上處理完會自動開始編譯運行，靜靜等待吧。
運氣不錯，成功運行起來了。接下來學習操作，iOS模擬器吧。
iOS模擬器操作
cmd + shift + h 是home鍵，重復兩次可看到所有開啟的app，按住上滑退出。(這是模擬器自帶的)
cmd + r 重新加載app。編譯運行app后，修改js代碼，可直接刷新頁面，或者開啟 live/hot reload
cmd + d 可以調出菜單，(真機可以搖一搖，小心別飛出去了:-D)，
2和3都是調試手段，所以必須xcode 編譯 debug 包才可使用，release 不可使用。
如果你看到你的模擬器動畫很慢，可以檢查 "菜單 - Debug - Show Animations" 是否開啟，快捷鍵 cmd + t
如果你在調試 iphone 7 普拉斯，超出mac屏幕，"菜單 - Window - Scale"，或使用 cmd + 1，2，3，4，調整比例， 對應100%,75%,50%,25%
cmd + d 和搖一搖調出的app菜單
- Reload 效果同 cmd + r， 重新加載js并重新啟動app
- Debug JS Remotely 遠程調試app，將開啟默認瀏覽器，http://localhost:8081/debugger-ui, cmd + option + t 并選中Console標簽，js 的console.log(); 將會打印到該窗口，可以展開查看對象的詳情。
- Enable Live Reload 開啟動態加載更新，js文件保存后，自動重啟app，
- Enable Hot Reload 開啟熱加載，js文件保存后，(自動增量加載js, 個人見解)，與Live Reload不同就是會停留在當前頁面并且變更邏輯。所以Hot Reload 比 Live Reload "高級", (需要最開始安裝的watchman支持），所以只開啟 Hot Reload 就可以了。（試驗得出的結論，如有官方說明，請聯系以變更謝謝！）
- Start Systrace 系統跟蹤，會生成一個 html, 暫時未使用到該功能，歡迎補充。
- Show Inspector 類似 chrome 的Elements元素布局檢查，實際開發很有用。
- Show Perf Monitor 性能監控或者說頁面繪制情況，Perf==Performance，
- 內存占用，
- jsc(這個不知道是啥sorry)，
- view的數量(上：已渲染，下：已加載)，
- UI 線程幀率和JS線程幀率，這兩個越高越好 :-D
代碼文件夾結構
默認文件，不建議修改：
- /android/ 安卓工程文件夾
- /ios/ iOS工程文件夾
- /node_modules/ node模塊包，記得添加到.gitignore文件中
- /index.android.js react native 安卓項目的入口文件
- /index.ios.js react native iOS 項目的入口文件
- /package.json npm管理配置，使用新的npm包，請提交，同時該文件變更，也需執行npm install
- …… 更多
項目文件：
- /App/ js 代碼存放目錄
- /App/Component/ 存放組件
- /App/Utils/ 存放工具類
- /App/View/ 存放View視圖文件
- …… 更多
代碼風格：
- 文件夾：大駝峰法（帕斯卡命名法）
- 文件：駝峰命名
- 變量：駝峰命名
- 其他代碼風格，建議使用WebStorm自動格式化的標準。
WebStorm 使用小技巧
- 菜單 - Code - Reformat Code 格式化代碼，快捷鍵cmd + option + L，時不時格式化一下，如果是多人協同工作，可以對“選中行區塊”進行格式化
- 菜單 - Code - Optmize Import 優化引入，快捷鍵cmd + option + O，會優化多余的import，執行完請務必進行自測
- 代碼變量 - 右鍵 - refactor - rename 重命名，快捷鍵 Fn + shift + F6 作用域下的變量重命名
- 文件列表 - 在文件上右鍵 - Local History - show history 可以查看和恢復文件本地的歷史記錄，如果文件還沒來得及提交到版本控制中，不小心刪了某段代碼甚至這個文件，都可以找回(刪除文件找回的辦法，先新建同名文件，再show history！)。 實用指數??????????
協同工作
mac 文件路徑不區分大小寫，(文件系統原因，更改需重裝系統)，
分支開發
-
develop分支代碼合并到master分支：
- 先提交到自己分支 git commit，
- 合并master到自己分支 git merge origin/master,
- 有沖突先解決沖突，
- 自測沒毛病推送到遠程分支 git push origin develop
- 切換到master分支 git checkout master
- 推送到遠程分支 git push origin master
git push -f origin master 強制推送本地的master分支， 需要在gitlab上把master分支解除protected狀態
git branch -d develop; git push origin :develop 如果一個分支已合并到master并且不會再在該分支開發，可以刪除，本地和遠程分支。
-
如果用gitlab，可以試試pull request。
?
文檔
- React Native 官網
- React Native 中文網
- …... 更多
