配置React Native環境及解決運行異常

一. 安裝Homebrew:

  Homebrew的官網（多語言版本）簡單明瞭地介紹瞭如何安裝和使用這個工具，;並提供了本身的Wiki。

    brew的安裝很簡單，使用一條ruby命令便可，Mac系統上已經默認安裝了ruby":

ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install)"

    等待一段時間後會出現

    Press RETURN to continue or any other key to abort

    敲回車後提示輸入你的電腦密碼:(輸入密碼的過程當中終端不會有任何變化)

 

    輸入密碼後提示

    Downloading and installing Homebrew...

    繼續耐心等待..

二. 安裝Node.js:

    使用 Homebrew 來安裝nvm，watchman 和 flow.(建議每次用Homebrew的時候先更新brew,命令：brew update )

 

 

    1,安裝nvm:

    終端中輸入:

    brew install nvm

    最後終端會提示

 

    大概意思就是若是沒有.nvm文件的話就要建立一個,終端中輸入

    mkdir ~/.nvm

    就能夠建立.nvm文件了

    ,而後去~/.bash_profile或者在shell的配置文件中配置以下內容:

    export NVM_DIR=~/.nvm

    source $(brew --prefix nvm)/nvm.sh

 

    具體操做以下

 

 

    先進入home目錄: cd ~

    打開.bash_profileopen文件:

    open .bash_profile

    若是文件不存在 就建立一個

    touch .bash_profile

   打開後把須要配置的內容複製進去而後保存退出

 

    如今NVM算是安裝完成了.

2.使用NVM安裝node.js

    終端輸入命令:

    nvm install node && nvm alias default node

    注:若是順利安裝完成可跳過下面步驟,直接進入第三步,進入安裝watchman和flow環節.

   

    nvm 默認是從http://nodejs.org/dist/下載的, 國外服務器, 必然很慢,

    好在 NVM 以及支持從鏡像服務器下載包, 因而咱們能夠方便地從七牛的 node dist 鏡像下載:

    $ NVM_NODEJS_ORG_MIRROR=https://npm.taobao.org/dist nvm install 0.11.11

    因而你就會看到一段很是快速進度條:

    ########################################################################         100.0%Nowusingnode v0.11.11

    若是你不想每次都輸入環境變量NVM_NODEJS_ORG_MIRROR, 那麼我建議你加入到.bashrc文件中:

    # nvmexportNVM_NODEJS_ORG_MIRROR=https://npm.taobao.org/distsource~/git/nvm/nvm.sh

    接着終端輸入命令:

    nvm install node && nvm alias default node

   若是使用NVM一直安裝失敗.能夠嘗試直接使用Homebrew安裝node: brew install node

三. 安裝watchman和flow:

 

終端輸入

brew install watchman

brew install flow

一切順利

建議按期運行brew update && brew upgrade來使您的應用程序保持最新狀態。

brew update && brew upgrade

 

四. 初始化項目及解決運行異常

初始化項目

首先安裝Xcode6.3或更高版本.

完成後,終端執行

npm install -g react-native-cli

react-native-cli 是完成剩餘安裝的命令行工具。它是經過 npm 安裝的。這將會在你的終端裏面安裝react-native這個命令行，你只須要作一次便可。

接着

react-native init AwesomeProject

這一條命令獲取 React Native 的源代碼和依賴包，而後在AwesomeProject/iOS/AwesomeProject.xcodeproj建立一個新的 Xcode 項目，而且在AwesomeProject/android/app下面建立一個 gradle 項目。這個命令初始化的項目在你的用戶目錄下.

若是想初始化到桌面上須要 cd 到桌面 而後在執行 react-native init AwesomeProject 這個命令。

打開項目的方式

To run your app on iOS:
   cd /Users/BlueCity/Desktop/hello
   react-native run-ios
   - or -
   Open ios/hello.xcodeproj in Xcode
   Hit the Run button
To run your app on Android:
   cd /Users/BlueCity/Desktop/hello
   Have an Android emulator running (quickest way to get started), or a device connected
   react-native run-android

 

解決運行異常

進入項目根目錄後，使用 run-ios 指令啓動該iOS APP：

react-native run-ios

對於版本高於0.45的建立項目，也許你會看到以下錯誤：

Error:
Build failed:
Unpacking /Users/zjy/.rncache/boost_1_63_0.tar.gz...
Print: Entry, ":CFBundleIdentifier", Does Not Exist

對應的直接點開.xcodeproj 運行相關的錯誤信息 

一、降級版本方案

本人通過多方查找，發現是建立項目下載安裝node依賴模塊時的資源缺失問題，目前最新的0.45及以上版本須要下載boost庫，該庫過大，致使下載出問題，參考:

https://github.com/facebook/react-native/issues/14368

https://github.com/facebook/react-native/issues/14447

解決方案有兩種，若是不追求新版本新特性，能夠下降建立項目的版本，使用 --version 指令明確設置項目版本：

react-native init MyApp --version 0.44.3

二、替換資源文件方案

依然但願使用新版本的解決方案則是手動下載相關文件替換：

下載以下四個相關文件放到項目根目錄下的 .rncache 目錄下，進行替換：

下載地址： https://pan.baidu.com/s/1kV5iVzD.

下載後替換：

cd ~/.rncache
cp ~/Downloads/boost_1_63_0.tar.gz ~/.rncache/

依次使用 cp 指令複製替換四個文件;

而後刪除第三方庫文件，在 node_modules/react-native/third-party/ 目錄下：

rm -r project/node_modules/react-native/third-part

再次執行啓動程序：

react-native run-ios

發現能夠正常運行了，接下來咱們能夠在編輯器裏編輯咱們的項目了，如咱們的react-native入口js文件– index.ios.js 文件，刷新便可看到變動。