搭建環境筆記記錄：

搭建開發環境

安裝node， watchman

brew install node brew install watchman 復制代碼

設置鏡像加速

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

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

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

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

npm install -g yarn react-native-cli 復制代碼

安裝完 yarn 后同理也要設置鏡像源

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

創建項目

到固定的目錄下創建項目文件夾

react-native init AwesomeProject 復制代碼

運行項目

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

在 /AwesomeProject/android/app/src/main 目錄下創建 空目錄 assets目錄

回到 /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:8081react-native run-android 復制代碼

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

RN調試

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

連上真機調試。

總結

以上是生活随笔為你收集整理的React Native 环境配置的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。