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


 

簡要:本系列文章講會對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)

從項目中自動執行安裝,升級,配置和刪除庫(也稱為依賴項)的過程。見npmyarn

 

發布

我們使用“發布”一詞作為“部署”的同義詞。當您發布應用程序時,它可以通過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中的關鍵術語!歡迎大家關注我的微信公眾號,這篇文章是否被大家認可,我的衡量標准就是公

眾號粉絲增長人數。歡迎大家轉載,但必須保留本人博客鏈接!

 

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM