React Native 環境配置

搭建環境筆記記錄：

搭建開發環境

1. 安裝node， watchman

   brew install node
   brew install watchman
   複製代碼

2. 設置鏡像加速

   npm config set registry https://registry.npm.taobao.org --global
   npm config set disturl https://npm.taobao.org/dist --global
   複製代碼

Watchman則是由 Facebook 提供的監視文件系統變動的工具。安裝此工具能夠提升開發時的性能（packager 能夠快速捕捉文件的變化從而實現實時刷新）

3. Yarn、React Native 的命令行工具（react-native-cli）

   Yarn是 Facebook 提供的替代 npm 的工具，能夠加速 node 模塊的下載。React Native 的命令行工具用於執行建立、初始化、更新項目、運行打包服務（packager）等任務。

   npm install -g yarn react-native-cli
   複製代碼

4. 安裝完 yarn 後同理也要設置鏡像源

   yarn config set registry https://registry.npm.taobao.org --global
   yarn config set disturl https://npm.taobao.org/dist --global
   複製代碼

建立項目

1. 到固定的目錄下建立項目文件夾

   react-native init AwesomeProject
   複製代碼

2. 運行項目

   cd AwesomeProject
   react-native run-android
   複製代碼

遇到的問題

運行 react-native start 是一直卡在 loading dependency graph...

最後出來 unable to talk to your watchman on /usr/local/var/run/watchman/xiuchengyin-state/sock

1. 在 /AwesomeProject/android/app/src/main 目錄下建立 空目錄 assets目錄
2. 回到 /AwesomeProject 下，執行如下命令：

react-native bundle --platform android --dev false --entry-file index.js --bundle-output android/app/src/main/assets/index.android.bundle --assets-dest  android/app/src/main/res
複製代碼

最終HelloWorld頁面起來了：

其它方案

adb reverse tcp:8081 tcp:8081

adb reverse tcp:8081 tcp:8081

react-native run-android
複製代碼

這樣就OK了，其實上面添加assets的方案不知道啥意思，不推薦。

RN調試

利用Chrome來調試：瀏覽器輸入http://localhost:8081/debugger-ui， 而後右鍵 選擇 檢查打開調試，看到 console。

連上真機調試。