React Native開發環境搭建

最近開始全面使用React技術棧開發，耳聽得團隊不久的未來有計劃使用React Native開發app，火燒眉毛來嘗試一波，首先搭建好開發環境並跑起來我們程序界的經典程序，期間也有一些坑，在這裏記錄分享給你們。

安裝包管理工具

本人使用的是Mac環境，因此以Mac爲例，對於windows，其實差異不大。

安裝Homebrew

Homebrew是爲Mac OS量身定製的一款集成包管理工具，咱們使用它很方便的安裝Node.js及切換Node.js版本。

/usr/bin/ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install)"複製代碼

注：在Max OS X 10.x版本中使用Homebrew安裝軟件時可能會發生/usr/local目錄不可寫的權限問題，此時可使用以下命令修復：

sudo chown -R `whoami` /usr/local複製代碼

安裝Node.js

接下來使用Homebrew安裝Node.js，Windows環境能夠直接去官網下載安裝Node.js：

brew install node複製代碼

若是安裝下載速度過慢，能夠設置使用國內淘寶提供的鏡像：

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

安裝包管理

咱們能夠自由選擇直接使用NPM或者另外安裝Yarn包管理工具，對於NPM的使用相信你們都已經很熟悉了，咱們這裏以Yarn爲例：

Yarn是Facebook提供的替代npm的工具，能夠加速node模塊的下載。

依然須要使用NPM安裝Yarn包：

npm install -g yarn複製代碼

隨後咱們就可使用yarn add代替npm install --save了。

安裝react-native-cli腳手架

React Native官方提供了一鍵生成項目初始結構的腳手架，初學者或體驗者能夠直接安裝使用：

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

安裝設置編輯器

Mac咱們使用Xcode開發iOS APP，安卓開發可使用Eclipse等，另外須要對Xcode編輯器進行簡單配置以支持react native：

依次點擊打開Xcode編輯器的Menu-》Preferences-》Locations，配置以下圖紅框中的命令行工具項：

Xcode命令行工具配置

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

接下來可使用腳手架初始化一個示例程序了：

// 初始化一個hello項目
react-native init hello
cd hello複製代碼

進入項目根目錄後，使用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複製代碼

降級版本方案

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

1. github.com/facebook/re…
2. github.com/facebook/re…

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

react-native init MyApp --version 0.44.3複製代碼

替換資源文件方案

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

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

rncache文件

下載地址：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文件，刷新便可看到變動。

其餘工具

Nuclide

Nuclide是由Facebook提供的一款基於atom編輯器的集成開發環境，可用於編寫、運行和 調試React Native應用。

Nuclide的入門文檔

原創文章，歡迎訪問個人博客：熊建剛的博客。