React Native搭建開(kāi)發(fā)環(huán)境

本文檔貢獻(xiàn)者:sunnylqm(100.00%)

歡迎使用 React Native!這篇文檔會(huì)幫助你搭建基本的 React Native 開(kāi)發(fā)環(huán)境。如果你已經(jīng)搭好了環(huán)境,那么可以嘗試一下編寫 Hello World

  • 完整原生環(huán)境

  • 簡(jiǎn)易沙盒環(huán)境

Follow these instructions if you need to build native code in your project. For example, if you are integrating React Native into an existing application, or if you "ejected" from Create React Native App, you'll need this section.

根據(jù)你所使用的操作系統(tǒng)、針對(duì)的目標(biāo)平臺(tái)不同,具體步驟有所不同。如果想同時(shí)開(kāi)發(fā) iOS 和 Android 也沒(méi)問(wèn)題,你只需要先選一個(gè)平臺(tái)開(kāi)始,另一個(gè)平臺(tái)的環(huán)境搭建只是稍有不同。

如果閱讀完本文檔后還碰到很多環(huán)境搭建的問(wèn)題,我們建議你以最新版本的文檔所述為準(zhǔn)!

開(kāi)發(fā)平臺(tái): [macOS] [Windows] [Linux]
目標(biāo)平臺(tái): [iOS] [Android]

6)安裝依賴 以下macOS為例

必須安裝的依賴有:Node、Watchman 和 React Native 命令行工具以及 Xcode。

雖然你可以使用任何編輯器來(lái)開(kāi)發(fā)應(yīng)用(編寫 js 代碼),但你仍然必須安裝 Xcode 來(lái)獲得編譯 iOS 應(yīng)用所需的工具和環(huán)境。</block> <block class="native mac ios android" style="box-sizing: border-box; display: block;">### Node, Watchman

我們推薦使用Homebrew來(lái)安裝 Node 和 Watchman。在命令行中執(zhí)行下列命令安裝:

brew install node
brew install watchman

如果你已經(jīng)安裝了 Node,請(qǐng)檢查其版本是否在 v8.3 以上。安裝完 Node 后建議設(shè)置 npm 鏡像以加速后面的過(guò)程(或使用科學(xué)上網(wǎng)工具)。注意:不要使用 cnpm!cnpm 安裝的模塊路徑比較奇怪,packager 不能正常識(shí)別!

npm config set registry https://registry.npm.taobao.org --global
npm config set disturl https://npm.taobao.org/dist --global

Watchman則是由 Facebook 提供的監(jiān)視文件系統(tǒng)變更的工具。安裝此工具可以提高開(kāi)發(fā)時(shí)的性能(packager 可以快速捕捉文件的變化從而實(shí)現(xiàn)實(shí)時(shí)刷新)。

Yarn、React Native 的命令行工具(react-native-cli)

Yarn是 Facebook 提供的替代 npm 的工具,可以加速 node 模塊的下載。React Native 的命令行工具用于執(zhí)行創(chuàng)建、初始化、更新項(xiàng)目、運(yùn)行打包服務(wù)(packager)等任務(wù)。

npm install -g yarn react-native-cli

安裝完 yarn 后同理也要設(shè)置鏡像源:

yarn config set registry https://registry.npm.taobao.org --global
yarn config set disturl https://npm.taobao.org/dist --global

安裝完 yarn 之后就可以用 yarn 代替 npm 了,例如用yarn代替npm install命令,用yarn add 某第三方庫(kù)名代替npm install --save 某第三方庫(kù)名

Xcode

React Native 目前需要Xcode 9.4 或更高版本。你可以通過(guò) App Store 或是到Apple 開(kāi)發(fā)者官網(wǎng)上下載。這一步驟會(huì)同時(shí)安裝 Xcode IDE、Xcode 的命令行工具和 iOS 模擬器。

Xcode 的命令行工具

啟動(dòng) Xcode,并在Xcode | Preferences | Locations菜單中檢查一下是否裝有某個(gè)版本的Command Line Tools。Xcode 的命令行工具中包含一些必須的工具,比如git等。

Xcode Command Line Tools

創(chuàng)建新項(xiàng)目

使用 React Native 命令行工具來(lái)創(chuàng)建一個(gè)名為"AwesomeProject"的新項(xiàng)目:

?。?!注意!?。?/strong>:init 命令默認(rèn)會(huì)創(chuàng)建最新的版本,而目前最新的 0.45 及以上版本需要下載 boost 等幾個(gè)第三方庫(kù)編譯。這些庫(kù)在國(guó)內(nèi)即便翻墻也很難下載成功,導(dǎo)致很多人無(wú)法運(yùn)行iOS項(xiàng)目?。?!中文網(wǎng)在論壇中提供了這些庫(kù)的國(guó)內(nèi)下載鏈接。如果你嫌麻煩,又沒(méi)有對(duì)新版本的需求,那么可以暫時(shí)創(chuàng)建0.44.3的版本。

react-native init AwesomeProject

提示:你可以使用--version參數(shù)(注意是個(gè)杠)創(chuàng)建指定版本的項(xiàng)目。例如react-native init MyApp --version 0.44.3。注意版本號(hào)必須精確到兩個(gè)小數(shù)點(diǎn)。

如果你是想把 React Native 集成到現(xiàn)有的原生項(xiàng)目中,則步驟完全不同,請(qǐng)參考集成到現(xiàn)有原生應(yīng)用

編譯并運(yùn)行 React Native 應(yīng)用

在你的項(xiàng)目目錄中運(yùn)行react-native run-ios

cd AwesomeProject
react-native run-ios

提示:如果 run-ios 無(wú)法正常運(yùn)行,請(qǐng)使用 Xcode 運(yùn)行來(lái)查看具體錯(cuò)誤(run-ios 的報(bào)錯(cuò)沒(méi)有任何具體信息)。

很快就應(yīng)該能看到 iOS 模擬器自動(dòng)啟動(dòng)并運(yùn)行你的項(xiàng)目。

AwesomeProject on iOS

react-native run-ios只是運(yùn)行應(yīng)用的方式之一。你也可以在 Xcode 或是Nuclide中直接運(yùn)行應(yīng)用。

如果你無(wú)法正常運(yùn)行,先回頭仔細(xì)對(duì)照文檔檢查,然后可以看看論壇的求助專區(qū)。

Incorrect hash:
xxxxxxxxxxxxxxxxxxx ?/Users/fugang/.rncache/boost_1_63_0.tar.gz

RN 0.45以上需要依賴一些第三方編譯庫(kù),首先找到third-party.sh,拉到文件底部查看所需的依賴庫(kù)名字和版本,將其下載后放入 ~/.rncache 即可

image.png
image.png
image.png

再次運(yùn)行react-native run-ios

image.png
image.png
image.png

在真機(jī)上運(yùn)行

上面的命令會(huì)自動(dòng)在 iOS 模擬器上運(yùn)行應(yīng)用,如果你想在真機(jī)上運(yùn)行,則請(qǐng)閱讀在設(shè)備上運(yùn)行這篇文檔。

修改項(xiàng)目

現(xiàn)在你已經(jīng)成功運(yùn)行了項(xiàng)目,我們可以開(kāi)始嘗試動(dòng)手改一改了:

  • 使用你喜歡的編輯器打開(kāi)App.js并隨便改上幾行。
  • 在 iOS 模擬器中按下?-R就可以刷新 APP 并看到你的最新修改?。ㄈ绻麤](méi)有反應(yīng),請(qǐng)檢查模擬器的 Hardware 菜單中,connect hardware keyboard 選項(xiàng)是否選中開(kāi)啟)

完成了!

恭喜!你已經(jīng)成功運(yùn)行并修改了你的第一個(gè) React Native 應(yīng)用。

image

接下來(lái)?

  • 試著在開(kāi)發(fā)者菜單中打開(kāi)Live Reload,現(xiàn)在你只要一保存代碼應(yīng)用就會(huì)自動(dòng)完整刷新。

  • 如果你想把 React Native 集成到現(xiàn)有的原生項(xiàng)目中,則請(qǐng)參考集成到現(xiàn)有原生應(yīng)用

如果你想從頭開(kāi)始學(xué)習(xí) React Native 開(kāi)發(fā),可以從嘗試編寫 Hello World開(kāi)始。

?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成,瀏覽時(shí)請(qǐng)結(jié)合常識(shí)與多方信息審慎甄別。
平臺(tái)聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點(diǎn),簡(jiǎn)書(shū)系信息發(fā)布平臺(tái),僅提供信息存儲(chǔ)服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

友情鏈接更多精彩內(nèi)容