您好,登錄后才能下訂單哦!
本篇內(nèi)容主要講解“怎么搭建React Native開發(fā)環(huán)境”,感興趣的朋友不妨來(lái)看看。本文介紹的方法操作簡(jiǎn)單快捷,實(shí)用性強(qiáng)。下面就讓小編來(lái)帶大家學(xué)習(xí)“怎么搭建React Native開發(fā)環(huán)境”吧!
索引
安裝包管理工具
本人使用的是Mac環(huán)境,所以以Mac為例,對(duì)于Windows,其實(shí)差別不大。
安裝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安裝軟件時(shí)可能會(huì)發(fā)生 /usr/local 目錄不可寫的權(quán)限問(wèn)題,此時(shí)可以使用如下命令修復(fù):
sudo chown -R `whoami` /usr/local
安裝Node.js
接下來(lái)使用Homebrew安裝Node.js,Windows環(huán)境可以直接去官網(wǎng)下載安裝 Node.js :
brew install node
如果安裝下載速度過(guò)慢,可以設(shè)置使用國(guó)內(nèi)淘寶提供的鏡像:
npm config set registry https://registry.npm.taobao.org --global npm config set disturl https://npm.taobao.org/dist --global
安裝包管理
我們可以自由選擇直接使用NPM或者另外安裝Yarn包管理工具,對(duì)于NPM的使用相信大家都已經(jīng)很熟悉了,我們這里以Yarn為例:
Yarn 是Facebook提供的替代npm的工具,可以加速node模塊的下載。
依然需要使用NPM安裝Yarn包:
npm install -g yarn
隨后我們就可以使用 yarn add 代替 npm install --save 了。
安裝react-native-cli腳手架
React Native官方提供了一鍵生成項(xiàng)目初始結(jié)構(gòu)的腳手架,初學(xué)者或體驗(yàn)者可以直接安裝使用:
npm install -g react-native-cli
安裝設(shè)置編輯器
Mac我們使用Xcode開發(fā)iOS APP,安卓開發(fā)可以使用Eclipse等,另外需要對(duì)Xcode編輯器進(jìn)行簡(jiǎn)單配置以支持react native:
依次點(diǎn)擊打開Xcode編輯器的Menu-》Preferences-》Locations,配置如下圖紅框中的命令行工具項(xiàng):
初始化項(xiàng)目及解決運(yùn)行異常
接下來(lái)可以使用腳手架初始化一個(gè)示例程序了:
// 初始化一個(gè)hello項(xiàng)目 react-native init hello cd hello
進(jìn)入項(xiàng)目根目錄后,使用 run-ios 指令啟動(dòng)該iOS APP:
react-native run-ios
對(duì)于版本高于0.45的創(chuàng)建項(xiàng)目,也許你會(huì)看到如下錯(cuò)誤:
Error: Build failed: Unpacking /Users/zjy/.rncache/boost_1_63_0.tar.gz... Print: Entry, ":CFBundleIdentifier", Does Not Exist
降級(jí)版本方案
本人經(jīng)過(guò)多方查找,發(fā)現(xiàn)是創(chuàng)建項(xiàng)目下載安裝node依賴模塊時(shí)的資源缺失問(wèn)題,目前***的0.45及以上版本需要下載boost庫(kù),該庫(kù)過(guò)大,導(dǎo)致下載出問(wèn)題,參考:
https://github.com/facebook/react-native/issues/14368
https://github.com/facebook/react-native/issues/14447
解決方案有兩種,如果不追求新版本新特性,可以降低創(chuàng)建項(xiàng)目的版本,使用 --version 指令明確設(shè)置項(xiàng)目版本:
react-native init MyApp --version 0.44.3
替換資源文件方案
依然希望使用新版本的解決方案則是手動(dòng)下載相關(guān)文件替換:
下載如下四個(gè)相關(guān)文件放到項(xiàng)目根目錄下的 .rncache 目錄下,進(jìn)行替換:
下載后替換:
cd ~/.rncache cp ~/Downloads/boost_1_63_0.tar.gz ~/.rncache/
依次使用 cp 指令復(fù)制替換四個(gè)文件;
然后刪除第三方庫(kù)文件,在 node_modules/react-native/third-party/ 目錄下:
rm -r project/node_modules/react-native/third-part
再次執(zhí)行啟動(dòng)程序:
react-native run-ios
發(fā)現(xiàn)可以正常運(yùn)行了,接下來(lái)我們可以在編輯器里編輯我們的項(xiàng)目了,如我們的react-native入口js文件– index.ios.js 文件,刷新即可看到變更。
其他工具
Nuclide
Nuclide是由Facebook提供的一款基于atom編輯器的集成開發(fā)環(huán)境,可用于編寫、 運(yùn)行 和 調(diào)試 React Native應(yīng)用。
到此,相信大家對(duì)“怎么搭建React Native開發(fā)環(huán)境”有了更深的了解,不妨來(lái)實(shí)際操作一番吧!這里是億速云網(wǎng)站,更多相關(guān)內(nèi)容可以進(jìn)入相關(guān)頻道進(jìn)行查詢,關(guān)注我們,繼續(xù)學(xué)習(xí)!
免責(zé)聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng),如果涉及侵權(quán)請(qǐng)聯(lián)系站長(zhǎng)郵箱:is@yisu.com進(jìn)行舉報(bào),并提供相關(guān)證據(jù),一經(jīng)查實(shí),將立刻刪除涉嫌侵權(quán)內(nèi)容。