297
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，配置如下圖紅框中的命令行工具項：
初始化項目及解決運行異常
接下來可以使用腳手架初始化一個示例程序了：
- // 初始化一個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庫，該庫過大，導致下載出問題，參考:
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 文件，刷新即可看到變更。
其他工具
Nuclide
Nuclide是由Facebook提供的一款基於atom編輯器的集成開發環境，可用於編寫、 運行 和 調試 React Native應用。
作者：佚名
來源：51CTO
最後更新：2017-09-12 15:02:54