React Native開發環境搭建 原

安裝包管理工具

本人使用的是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. https://github.com/facebook/react-native/issues/14368
  2. https://github.com/facebook/react-native/issues/14447

解決方案有兩種,如果不追求新版本新特性,可以降低創建項目的版本,使用--version指令明確設置項目版本:

react-native init MyApp --version 0.44.3

替換資源文件方案

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

下載如下四個相關文件放到項目根目錄下的.rncache目錄下,進行替換:

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應用。

Nuclide的入門文檔

原創文章,歡迎訪問我的博客:熊建剛的博客

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章