React-Native 環境安裝及除錯（Mac版）

原文地址：React-Native 環境安裝及除錯（Mac版）

準備工作

安裝必要的軟體，這裡就不詳細說了，具體可參考官方文件

• 安裝React-Native Cli npm install -g create-react-native-app

• Xcode 安裝升級到 8+

• 初始化RN專案 react-native init rnHelloWord，可能會比較慢，要耐心等到

啟動專案

• 進入專案並啟動

  cd rnHelloWord
  npm start
  複製程式碼

  

  也可以使用Xcode啟動專案，點選ios/AwesomeProject.xcodeproj，再點選右上角的Run即可跑起來。

除錯

模擬器除錯

專案啟動後，點選模擬器command+d - 選擇 Enable Live Reload，監控RN程式碼的改動（熱替換）,可直接修改程式碼，即可檢視最新的修改。

真機除錯

PC上的設定

• 手機通過USB連線電腦，在Xcode中選擇手機作為目標裝置。

  

• 如圖填寫，並選擇：

  

• 同時相關的 Tests target 裡同樣也要選擇使用的開發者賬號。

  

這樣基本工作就完成了，可以點選Run啟動啦～～

手機上設定

• 這時手機上就安裝了一個rnHelloWord的app，點選啟動可能會彈一個‘不受信任的’提示，怎麼辦呢？

• 不要著急，我們可以在手機上設定-通用-裝置管理-新增信任

• 然後就可以正常啟動了

• 應用啟動後，只需要搖一搖手機可以調出除錯選單，裡面具體功能同模擬器一樣，這裡就不再說明了。

接下來就可以開發了。

---

結束語

React-Native執行環境安裝難於上青天，安裝成功後你離成功就不遠了。它的語法相近於React，擼起袖子～～～寫程式碼吧。

更多文章請關注：我的部落格