你可以了解到

1. 從環(huán)境搭建到真機(jī)運(yùn)行第一個(gè)RN項(xiàng)目
2. RN項(xiàng)目的一般工程結(jié)構(gòu)
3. 基本xcode，ios模擬器操作
4. 調(diào)試方法
5. 工具選用和一些小技巧

mac OS 環(huán)境配置

開發(fā)環(huán)境

brew install node           # node  
brew install node

個(gè)人建議去官網(wǎng)下載LTS（Long-term Support官方長期支持）版本， https://nodejs.org/en/

brew install watchman       # watchman 監(jiān)控項(xiàng)目文件是否改動(dòng)，用作 hot reload 等
npm install -g react-native-cli     # 安裝react-native node 項(xiàng)目，使用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 和 運(yùn)行環(huán)境

1. 安裝或升級(jí) xcode 至最新版本
2. 打開 xcode，cmd + shift + 2，simulator模擬器
3. 沒有想要的Simulator OS版本需要自行下載，(React Native 支持 iOS 8.0 以上)，這里以為10.2示例
4. 真機(jī)調(diào)試：解鎖狀態(tài)下，連接數(shù)據(jù)線，并且每次編譯運(yùn)行程序也都需要解鎖

配置模擬器

安裝了XCode，但是大部分開發(fā)工作都不在 XCode 完成，我們需要一個(gè)IDE，可選的IDE有：

1. 推薦 WebStorm http://www.jetbrains.com/webstorm/ 30天免費(fèi)試用，一般試用完就新版可以卸載重新安裝，或者免費(fèi)試用他家測試版本，或者付費(fèi)使用。
2. Sublime 很多前端工程師的IDE首選
3. facebook 自家的 nuclide https://nuclide.io/ atom + nuclide插件，但并不好用，配置麻煩。

so，為了能專注于React Native開發(fā)，請優(yōu)先使用 WebStorm。

?

初始化項(xiàng)目

這里使用 myproject 作為項(xiàng)目名稱，（初始化后更改較麻煩）

mkdir -p /data/app
cd /data/app
react-native init myproject  # 大約1分半, 

運(yùn)行

命令行運(yùn)行 myproject 工程

cd /data/app/myproject
react-native run-ios

xcode 運(yùn)行

cd /data/app/myproject
open ios/myproject.xcodeproj

點(diǎn)擊左上角三角形"運(yùn)行"按鈕

xcode 配置

如果需要在真機(jī)調(diào)試，還需要做如下操作：

1. bundle identifier 設(shè)置唯一的id
2. signing 勾選Automatically manage signing
3. Team 選擇自己的appid

ios project 設(shè)置

xcode 剛剛開啟項(xiàng)目，狀態(tài)欄會(huì)有 Indexing | Processing files， 插入手機(jī)，狀態(tài)欄也會(huì)有 is busy processing symbol files, 直接點(diǎn)擊運(yùn)行以上處理完會(huì)自動(dòng)開始編譯運(yùn)行，靜靜等待吧。

ios模擬器

運(yùn)氣不錯(cuò)，成功運(yùn)行起來了。接下來學(xué)習(xí)操作，iOS模擬器吧。

iOS模擬器操作

1. cmd + shift + h 是home鍵，重復(fù)兩次可看到所有開啟的app，按住上滑退出。(這是模擬器自帶的)

2. cmd + r 重新加載app。編譯運(yùn)行app后，修改js代碼，可直接刷新頁面，或者開啟 live/hot reload

3. cmd + d 可以調(diào)出菜單，(真機(jī)可以搖一搖，小心別飛出去了:-D)，

4. 2和3都是調(diào)試手段，所以必須xcode 編譯 debug 包才可使用，release 不可使用。

5. 如果你看到你的模擬器動(dòng)畫很慢，可以檢查 "菜單 - Debug - Show Animations" 是否開啟，快捷鍵 cmd + t

6. 如果你在調(diào)試 iphone 7 普拉斯，超出mac屏幕，"菜單 - Window - Scale"，或使用 cmd + 1，2，3，4，調(diào)整比例， 對應(yīng)100%,75%,50%,25%

cmd + d 和搖一搖調(diào)出的app菜單

1. Reload 效果同 cmd + r， 重新加載js并重新啟動(dòng)app
2. Debug JS Remotely 遠(yuǎn)程調(diào)試app，將開啟默認(rèn)瀏覽器，http://localhost:8081/debugger-ui, cmd + option + t 并選中Console標(biāo)簽，js 的console.log(); 將會(huì)打印到該窗口，可以展開查看對象的詳情。
3. Enable Live Reload 開啟動(dòng)態(tài)加載更新，js文件保存后，自動(dòng)重啟app，
4. Enable Hot Reload 開啟熱加載，js文件保存后，(自動(dòng)增量加載js, 個(gè)人見解)，與Live Reload不同就是會(huì)停留在當(dāng)前頁面并且變更邏輯。所以Hot Reload 比 Live Reload "高級(jí)", (需要最開始安裝的watchman支持），所以只開啟 Hot Reload 就可以了。（試驗(yàn)得出的結(jié)論，如有官方說明，請聯(lián)系以變更謝謝?。?/li>
5. Start Systrace 系統(tǒng)跟蹤，會(huì)生成一個(gè) html, 暫時(shí)未使用到該功能，歡迎補(bǔ)充。
6. Show Inspector 類似 chrome 的Elements元素布局檢查，實(shí)際開發(fā)很有用。
7. Show Perf Monitor 性能監(jiān)控或者說頁面繪制情況，Perf==Performance，
   1. 內(nèi)存占用，
   2. jsc(這個(gè)不知道是啥sorry)，
   3. view的數(shù)量(上：已渲染，下：已加載)，
   4. UI 線程幀率和JS線程幀率，這兩個(gè)越高越好 :-D

代碼文件夾結(jié)構(gòu)

默認(rèn)文件，不建議修改：

1. /android/ 安卓工程文件夾
2. /ios/ iOS工程文件夾
3. /node_modules/ node模塊包，記得添加到.gitignore文件中
4. /index.android.js react native 安卓項(xiàng)目的入口文件
5. /index.ios.js react native iOS 項(xiàng)目的入口文件
6. /package.json npm管理配置，使用新的npm包，請?zhí)峤?，同時(shí)該文件變更，也需執(zhí)行npm install
7. …… 更多

項(xiàng)目文件：

1. /App/ js 代碼存放目錄
2. /App/Component/ 存放組件
3. /App/Utils/ 存放工具類
4. /App/View/ 存放View視圖文件
5. …… 更多

代碼風(fēng)格：

1. 文件夾：大駝峰法（帕斯卡命名法）
2. 文件：駝峰命名
3. 變量：駝峰命名
4. 其他代碼風(fēng)格，建議使用WebStorm自動(dòng)格式化的標(biāo)準(zhǔn)。

WebStorm 使用小技巧

1. 菜單 - Code - Reformat Code 格式化代碼，快捷鍵cmd + option + L，時(shí)不時(shí)格式化一下，如果是多人協(xié)同工作，可以對“選中行區(qū)塊”進(jìn)行格式化
2. 菜單 - Code - Optmize Import 優(yōu)化引入，快捷鍵cmd + option + O，會(huì)優(yōu)化多余的import，執(zhí)行完請務(wù)必進(jìn)行自測
3. 代碼變量 - 右鍵 - refactor - rename 重命名，快捷鍵 Fn + shift + F6 作用域下的變量重命名
4. 文件列表 - 在文件上右鍵 - Local History - show history 可以查看和恢復(fù)文件本地的歷史記錄，如果文件還沒來得及提交到版本控制中，不小心刪了某段代碼甚至這個(gè)文件，都可以找回(刪除文件找回的辦法，先新建同名文件，再show history！)。 實(shí)用指數(shù)??????????

協(xié)同工作

1. mac 文件路徑不區(qū)分大小寫，(文件系統(tǒng)原因，更改需重裝系統(tǒng))，

2. 分支開發(fā)

3. develop分支代碼合并到master分支：

   1. 先提交到自己分支 git commit，
   2. 合并master到自己分支 git merge origin/master,
   3. 有沖突先解決沖突，
   4. 自測沒毛病推送到遠(yuǎn)程分支 git push origin develop
   5. 切換到master分支 git checkout master
   6. 推送到遠(yuǎn)程分支 git push origin master

4. git push -f origin master 強(qiáng)制推送本地的master分支， 需要在gitlab上把master分支解除protected狀態(tài)

5. git branch -d develop; git push origin :develop 如果一個(gè)分支已合并到master并且不會(huì)再在該分支開發(fā)，可以刪除，本地和遠(yuǎn)程分支。

6. 如果用gitlab，可以試試pull request。

   ?

文檔

1. React Native 官網(wǎng)
2. React Native 中文網(wǎng)
3. …... 更多