最近開始全面使用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庫,該庫過大,導致下載出問題,參考:
解決方案有兩種,如果不追求新版本新特性,可以降低建立專案的版本,使用--version
指令明確設定專案版本:
react-native init MyApp --version 0.44.3複製程式碼
替換資原始檔方案
依然希望使用新版本的解決方案則是手動下載相關檔案替換:
下載如下四個相關檔案放到專案根目錄下的.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應用。
原創文章,歡迎訪問我的部落格:熊建剛的部落格。