Expo大做戰(四)--快速用expo構建一個app，expo中的關鍵術語 Expo大做戰(一)--什麼是expo，如何安裝expo clinet和xde，xde如何使用 Expo大做戰(二)--e

 

簡要：本系列文章講會對expo進行全面的介紹，本人從2017年6月份接觸expo以來，對expo的研究斷斷續續，一路走來將近10個月，廢話很少說，接下來你看到內容，講所有來與官網

我猜去所有機翻+我的修改補充+demo測試的形式，對expo進行一次大補血！歡迎加入expo興趣學習交流羣：597732981

【以前我寫過一些列關於expo和rn入門配置的東i西，你們能夠點擊這裏查看：從零學習rn開發】

相關文章：

Expo大做戰(一)--什麼是expo，如何安裝expo clinet和xde，xde如何使用

Expo大做戰(二)--expo的生命週期，expo社區交流方式，expo學習必備資源，開發使用expo時關注的一些問題

Expo大做戰(三)--針對已經開發過react native項目開發人員有針對性的介紹了expo，expo的侷限性，開發時項目選型注意點等

Expo大做戰(四)--快速用expo構建一個app，expo中的關鍵術語

Expo大做戰(五)--expo中app.json 文件的配置信息

Expo大做戰(六)--expo開發模式，expo中exp命令行工具，expo中如何查看日誌log，expo中的調試方式

Expo大做戰(七)--expo如何使用Genymotion模擬器

Expo大做戰(八)--expo中的publish以及expo中的link，對link這塊東西沒有詳細看，你們能夠來和我交流

更多>>

接下來就開始擼碼

---

用expo工做

本節中的文章詳細介紹瞭如何使用expo開發環境和工具的各個方面。

若是您對expo徹底陌生，請確保您安裝了這些工具並進行了環視。 以後，您可能須要閱讀並運行以建立您的第一個項目。

 

正在運行 （up and running）

本指南的目標是儘快啓動並運行expo應用程序。

在這一點上，咱們應該在咱們的開發機器和Expo客戶端上安裝XDE，安裝在iOS或Android物理設備或仿真器上。若是不是，繼續操做以前請返回安裝指南。

好吧，讓咱們開始吧。

建立一個賬戶

打開XDE後，系統將提示您輸入用戶名和密碼。用你想要的用戶名和密碼填寫並點擊繼續 - 若是用戶名還沒有被使用，咱們會自動爲你建立賬戶。

建立項目

按下Project並選擇New Project，而後選擇Tab Navigation選項，由於這會給咱們一個很好的起點，而後在彈出的對話框中輸入項目的名稱。而後按建立。

接下來，選擇保存項目的位置。我將全部有趣的項目保存在〜/coding這個目錄下，所以我瀏覽到該目錄並按下打開。

XDE如今正在初始化所選目錄中的一個新項目：它複製一個基本模板並安裝反應，react-native和expo。

當項目初始化並準備就緒時，您將在XDE日誌中看到消息「React packager ready」。

「React packager」是一個簡單的HTTP服務器，它使用Babel編譯咱們的應用程序JavaScript代碼並將其提供給Expo應用程序。

注意：若是您在MacOS上而且XDE卡住「等待打包程序和隧道啓動」，則可能須要在您的機器上安裝（watchman）。最簡單的方法是使用Homebrew，

brew install watchman

 

在手機或模擬器上打開應用程序

你會看到XDE向你顯示了一個像http://4v-9wa.notbrent.mynewproject.exp.direct:80這樣的URL--隨意在瀏覽器中打開它，你會發現它提供了一些JSON。這個JSON是expo的表現。咱們能夠打開咱們的應用程序，在咱們的手機上打開expo應用程序，在地址欄中輸入此網址。或者，按分享，輸入您的電話號碼，而後按發送連接。打開手機上的信息並點擊連接在expo上打開它。您能夠與安裝了展會應用程序的其餘人共享此連接，但只有在XDE中打開該項目時纔可使用該連接。

要在iOS模擬器中打開應用程序，您能夠按設備按鈕並選擇在iOS模擬器上打開（僅適用於macOS）。要在Android模擬器中打開該應用程序，請先啓動它，而後按設備並在Android上打開。

進行第一次改變

在新項目中打開屏幕/ HomeScreen.js，並更改render（）函數中的任何文本。你應該看到你的應用程序從新加載你的更改。

沒法看到您的更改？

實時從新加載在默認狀況下是啓用的，可是咱們只要確保咱們繼續執行這些步驟便可啓用它，以防萬一某些事情不起做用。

1. 首先，確保在XDE中啓用了開發模式。
2. 接下來，關閉應用程序並從新打開它。
3. 一旦應用程序再次打開，搖動您的設備以顯示開發者菜單。若是您正在使用模擬器，請按⌘+ d用於iOS，或按Ctrl + m用於Android。
4. 若是您看到啓用Live Reload，請按下它並從新加載您的應用程序。若是您看到禁用Live Reload，請退出開發者菜單並嘗試進行其餘更改。應用內開發者菜單

 

手動從新加載應用程序

若是您已按照上述步驟進行操做，而且實時從新加載仍然無效，請按XDE右下方的按鈕向咱們發送支持請求。在咱們爲您解決問題以前，您能夠搖動設備並按下從新加載，也可使用如下工具之一，這兩種工具均可以在沒有開發模式的狀況下使用。 使用expo按鈕刷新

 

祝賀

您已經建立了一個新的expo項目，進行了更改，並將其更新。

 

下面介紹一些expo裏面的專業術語

 

app.json

app.json是一個存在於每一個世博項目中的文件，它用於配置您的項目，例如名稱，圖標和啓動畫面。閱讀「使用app.json進行配置」

 

create-react-native-app

 

React Native等同於create-react-app。讓您設置並建立一個React Native應用程序，不須要任何構建配置，它使用Expo來完成此任務。閱讀「Expo＆Create React Native App」中的更多內容。

 

分離(detch)

expo中使用術語「分離」來描述標準expo開發環境的溫馨溫馨，您沒必要處理構建配置或本地代碼。當你從expo「分離」的時候，你可使用ExpoKit得到本地項目，因此你能夠繼續使用expoAPI來構建你的項目，可是如今你的工做流程就像在沒有expo的狀況下構建React Native應用程序同樣。詳情請參閱「拆卸expo」。

 

eject

 

術語「eject」經過create-react-app進行推廣，並用於create-react-native-app。當你「拋出」你的項目時，你會採起比分離更極端的步驟 - 你沒法使用expoAPI並徹底離開expo環境。閱讀有關eject的更多信息。

 

模擬器

模擬器用於描述計算機上Android設備的軟件模擬器。一般iOS仿真器被稱爲模擬器。

 

EXP

與expo合做的命令行工具。閱讀更多。

 

Experience

 

應用程序的同義詞一般意味着更多的單一用途和更小的範圍，有時是藝術性的和異想天開的。

 

expo clent

運行Expo應用程序的iOS和Android應用程序。當您想在Expo Client外部運行您的應用並將其部署到App和/或Play商店時，您能夠構建一個獨立應用。

 

expo SDK

Expo軟件開發工具包（SDK）提供對設備/系統功能的訪問，如相機，推送通知，聯繫人，文件系統等。滾動到文檔導航中的SDK API參考，查看API的完整列表並瀏覽它們。閱讀有關Expo SDK的更多信息。在Github上找到它。

 

ExpoKit

ExpoKit是一個Objective-C和Java庫，容許您使用Expo SDK和平臺以及現有的Expo項目做爲更大的標準本地項目的一部分 - 您一般使用Xcode，Android Studio或react-native init建立的項目。閱讀更多。

 

iOS版

iPhone，iPad和Apple TV上使用的操做系統。expo目前在iOS和iPhone上運行。

 

Linking

linking可能意味着深刻連接到應用程序，相似於您連接到網站上的網站或連接本地庫到您分離的ExpoKit應用程序。

 

Manifest(清單)

expo應用程序清單相似於Web應用程序清單 - 它提供expo須要知道如何運行應用程序和其餘相關數據的信息。閱讀更多「expo如何運做」。

 

原生目錄(Native Directory)

React Native生態系統擁有數千個庫。若是沒有專用的工具，很難知道這些庫是什麼，搜索它們，肯定質量，嘗試它們，並篩選出不適合您項目的庫（有些不適用於expo，有些不適用於Android或iOS）。 Native Directory是一個旨在解決此問題的網站，咱們建議您使用它來查找要在項目中使用的包。

 

NPM

npm是JavaScript的包管理器和存儲包的註冊表。咱們在世博會內部使用的替代包裝經理是紗線。

 

無線更新(Over the Air updates)

傳統上，iOS和Android應用經過向App和Play商店提交更新後的二進制文件進行更新。無線（OTA）更新容許您將更新推送到您的應用程序，而無需向商店提交新版本的開銷。在「發佈」中閱讀更多內容。

 

包管理器(Package Manager)

從項目中自動執行安裝，升級，配置和刪除庫（也稱爲依賴項）的過程。見npm和yarn。

 

發佈

咱們使用「發佈」一詞做爲「部署」的同義詞。當您發佈應用程序時，它能夠經過expo客戶端的持久URL訪問，或者在獨立應用程序的狀況下，它能夠經過無線方式更新應用程序。

 

React Native

「React Native可以讓您僅使用JavaScript構建移動應用程序。它使用與React相同的設計，讓您從聲明性組件構建豐富的移動UI。「瞭解更多信息。

 

Shell App

咱們偶爾用於獨立應用程序的另外一個術語,和Standalone app 一個意識。

 

模擬器 （Simulator）

iOS設備的模擬器，您能夠在macOS（或Snack）上運行，以便在您的應用程序上工做，而無需使用物理設備。

 

Slug

咱們在app.json中使用「slug」一詞來指代您的應用在其網址中使用的名稱。例如，本地組件列表應用程序位於https://expo.io/@community/native-component-list而且slug是 「 native-component-list.」。

 

Snack

Snack是一種瀏覽器內開發環境，您能夠在無需在手機或計算機上安裝任何工具的狀況下構建expo exprience。

 

Standalone app

能夠提交給iOS App Store或Android Play商店的應用程序二進制文件。 閱讀「構建獨立應用程序」。

 

XDE

一個帶有圖形用戶界面（GUI）的桌面工具，用於與expo項目合做。 它具備與exp CLI工具大體相同的功能，但適用於更適合使用GUI的人員。

 

Yarn

JavaScript的包管理器。 閱讀更多。 

 

---

 

下一張繼續介紹，這一篇主要介紹了：快速用expo構建一個app，expo中的關鍵術語！歡迎你們關注個人微信公衆號，這篇文章是否被你們承認，個人衡量標準就是公

衆號粉絲增加人數。歡迎你們轉載，但必須保留本人博客連接！