簡要:本系列文章講會對expo進行全面的介紹,本人從2017年6月份接觸expo以來,對expo的研究斷斷續續,一路走來將近10個月,廢話很少說,接下來你看到內容,將所有來與官網javascript
我猜去所有機翻+我的修改補充+demo測試的形式,對expo進行一次大補血!歡迎加入expo興趣學習交流羣:597732981html
【以前我寫過一些列關於expo和rn入門配置的東i西,你們能夠點擊這裏查看:從零學習rn開發】java
相關文章:node
Expo大做戰(一)--什麼是expo,如何安裝expo clinet和xde,xde如何使用react
Expo大做戰(二)--expo的生命週期,expo社區交流方式,expo學習必備資源,開發使用expo時關注的一些問題ios
Expo大做戰(三)--針對已經開發過react native項目開發人員有針對性的介紹了expo,expo的侷限性,開發時項目選型注意點等git
Expo大做戰(四)--快速用expo構建一個app,expo中的關鍵術語github
Expo大做戰(五)--expo中app.json 文件的配置信息json
Expo大做戰(六)--expo開發模式,expo中exp命令行工具,expo中如何查看日誌log,expo中的調試方式react-native
Expo大做戰(七)--expo如何使用Genymotion模擬器
Expo大做戰(八)--expo中的publish以及expo中的link,對link這塊東西沒有詳細看,你們能夠來和我交流
接下來就開始擼碼
Expo&「Create React Native App」
Create Native React Native 應用程序可以讓您構建React Native應用程序而無需任何構建配置。這聽起來可能很熟悉,由於expo也這樣作 - 當你用XDE或exp建立項目時,你沒必要處理Xcode或Android Studio配置文件,它就能夠工做。本指南旨在概述Expo和CRNA(create-react-native-app)之間的一些主要差別。CRNA不要求你有expo帳戶
你能夠運行create-react-native-app xx(app 名稱)。那麼,沒有帳戶意味着什麼,註冊和使用XDE / EXP會獲得什麼?爲何咱們須要與expo一塊兒?有一個expo帳戶可讓你作到如下幾點:將您的項目發佈到永久URL,例如:https://expo.io/@community/reactconf2017。有關更多信息,請參閱在Expo上發佈。
爲app / play商店分發構建二進制文件。要使用CRNA而不使用Expo,您須要運行彈出。
你能夠在CRNA項目中使用XDE / exp嗎?
固然能夠!像使用XDE和exp的其餘expo項目同樣打開項目,它將按預期工做。
使用ExpoKit對CRNA用戶意味着什麼?
若是你想添加自定義本地代碼到你的expo應用程序,你將須要使用ExpoKit。使用CRNA,您有兩種選擇:您能夠彈出(eject )一個普通的React Native項目,而不須要任何對Expo的依賴,或者您能夠彈出(eject )使用ExpoKit,這將容許您繼續使用Expo API。點擊此處閱讀更多關於使用CRNA彈出的信息。
Expo 如何運做
儘管沒有必要知道使用expo的這些狀況,但許多工程師喜歡瞭解他們的工具如何工做。 咱們將在這裏介紹幾個關鍵概念,其中包括:
- 您的應用的本地開發(Local development of your app)
- 發佈/部署您的應用的生產版本(Publishing/deploying a production version of your app)
- Expo如何管理SDK的變化(How Expo manages changes to its SDK)
- 離線打開Expo應用程(Opening Expo apps offline)
您還能夠瀏覽源文件,分支文件,入侵併在github / @ expo上參與expo工具。
本地運行項目(Serving an Expo project for local development)
這裏有兩個部分:Expo應用程序和Expo開發工具(XDE或者是CLI)。 爲了簡化命名,咱們將在這裏假設XDE。 當您在XDE中打開應用程序時,它會在後臺生成並管理兩個服務器進程:Expo Development Server和React Native Packager Server。注意:XDE還產生了一個隧道進程,它容許局域網外的設備在不須要更改防火牆設置的狀況下訪問上述服務器。 若是你想了解更多,請參閱ngrok。
Expo開發服務器 (
Expo Development Server)
此服務器是您在Expo App中輸入網址時首先點擊的端點。 其目的是爲expo宣言提供服務,並在手機或模擬器上提供XDE用戶界面和expo應用程序之間的溝通層。
Expo清單
Expo Manifest
如下是經過XDE提供的清單示例。 你應該注意的第一件事是app.json有不少相同的字段(若是你尚未閱讀,請參閱配置與app.json部分)。 這些字段直接從該文件中獲取 - expo應用程序訪問您的配置的方式。{ "name":"My New Project", "description":"A starter template", "slug":"my-new-project", "sdkVersion":"18.0.0", "version":"1.0.0", "orientation":"portrait", "primaryColor":"#cccccc", "icon":"https://s3.amazonaws.com/exp-brand-assets/ExponentEmptyManifest_192.png", "notification":{ "icon":"https://s3.amazonaws.com/exp-us-standard/placeholder-push-icon.png", "color":"#000000" }, "loading":{ "icon":"https://s3.amazonaws.com/exp-brand-assets/ExponentEmptyManifest_192.png" }, "entryPoint": "node_modules/expo/AppEntry.js", "packagerOpts":{ "hostType":"tunnel", "dev":false, "strict":false, "minify":false, "urlType":"exp", "urlRandomness":"2v-w3z", "lanType":"ip" }, "xde":true, "developer":{ "tool":"xde" }, "bundleUrl":"http://packager.2v-w3z.notbrent.internal.exp.direct:80/apps/new-project-template/main.bundle?platform=ios&dev=false&strict=false&minify=false&hot=false&includeAssetFileHashes=true", "debuggerHost":"packager.2v-w3z.notbrent.internal.exp.direct:80", "mainModuleName":"main", "logUrl":"http://2v-w3z.notbrent.internal.exp.direct:80/logs" }清單中的每一個字段都是一些配置選項,告訴expo運行您的應用程序須要知道什麼。應用程序首先獲取清單並使用它顯示您在app.json中指定的應用程序的加載圖標,而後繼續在給定的bundleUrl中獲取應用程序的JavaScript - 此URL指向React Native Packager Server。
爲了將日誌流式傳輸到XDE,Expo SDK攔截對console.log,console.warn等的調用並將它們發佈到清單中指定的logUrl。該端點位於Expo Development Server上。
React Native Packager Server
若是您在沒有Expo的狀況下使用React Native,您能夠經過在項目目錄中運行react-native start來啓動打包程序。expo爲您啓動,並將管道輸送到XDE。該服務器有兩個目的。
首先是將您的應用程序JavaScript編譯爲單個文件並翻譯您編寫的與您的手機的JavaScript引擎不兼容的任何JavaScript代碼。例如,JSX不是有效的JavaScript--它是一種語言擴展,它使得React組件更加愉快,而且它被編譯成普通的函數調用 - 好比<HelloWorld />將成爲React.createElement(HelloWorld,{},null) (有關更多信息,請參見深刻JSX)。其餘語言功能(如async / await)在大多數引擎中尚不可用,所以須要將它們編譯成可在您的手機的JavaScript引擎JavaScriptCore上運行的JavaScript代碼。
第二個目的是服務資產(serve assets)。當您在應用中添加圖片時,除非您已經緩存了該資源,不然您將在XDE中看到請求,您將使用相似<Image source = {require('./ assets / example.png')} />的語法日誌如:<START> processing asset request my-proejct/assets/example@3x.png。注意它爲屏幕DPI提供了正確的資產,假設它存在。
在生產環境中發佈/部署Expo應用程序
當您發佈Expo應用程序時,咱們將其編譯爲啓用了生產標誌的JavaScript包。也就是說,咱們縮小了源代碼,而且咱們告訴React Native包裝程序以生產模式構建(這又將__DEV__設置爲false)。編譯完成後,咱們將該捆綁包以及它須要的任何資產(請參閱資產)上傳到CloudFront。咱們還將您的Manifest(包括大部分app.json配置)上傳到咱們的服務器。發佈完成後,咱們會爲您提供應用的網址,您能夠將其發送給任何擁有expo客戶端人進行項目預覽體驗等。
注意:默認狀況下,全部expo項目都是不公開的,這意味着發佈的項目不會在任何地方公開搜索或發現。分享連接取決於你。您能夠在app.json中更改此設置。
發佈完成後,您的代碼的新版本便可供全部現有用戶使用。他們會在下次打開應用或刷新它時下載更新版本,前提是他們有一個支持在app.json中指定的sdkVersion的Expo客戶端版本。
iOS和Android上的更新處理方式不一樣。在Android上,更新在後臺下載。這意味着用戶第一次在更新後打開您的應用程序時,它們將得到舊版本,而新版本將在後臺下載。他們第二次打開應用程序,他們將得到新版本。在iOS上,更新是同步下載的,所以用戶在更新後第一次打開您的應用時將得到新版本。
注意:要將應用程序打包到Apple App Store或Google Play商店進行部署,請參閱構建獨立應用程序。每次更新SDK版本時,都須要從新構建二進制文件。
SDK版本
expo應用程序的sdkVersion指出要使用哪一個版本的ObjC / Java / C 層。每一個sdkVersion大體對應於React Native和這些文檔的SDK部分中的expo圖書館的發行版。Expo客戶端應用程序支持許多版本的Expo SDK,但應用程序一次只能使用一個。這使您能夠當即發佈您的應用程序,而且即便咱們徹底修改或刪除了您的應用程序依賴的新版本的API,仍然能夠在一年以內無任何更改地運行它。這是可能的,由於你的應用程序將始終與發佈它的日期相同的編譯代碼運行。
若是您使用新的sdkVersion向您的應用發佈更新,若是用戶還沒有更新到最新的Expo客戶端,那麼他們仍然可使用之前的sdkVersion。
注意:最終咱們可能會制定一項政策,要求咱們保留sdkVersions多久,並開始修剪客戶端的舊版本的sdk,但在咱們這樣作以前,全部內容都將保持向後兼容。
Opening a deployed Expo app
這個過程與開發expo用程序的過程基本相同,只是如今咱們擊中了expo服務器以獲取清單(only now we hit an Expo server to get the manifest),而且向咱們展現了CloudFront檢索應用程序的JavaScript的過程。離線開啓Expo App (Opening Expo Apps Offline)
expo客戶端會自動緩存已打開的每一個應用程序的最新版本。 當您嘗試打開expo應用程序時,它老是嘗試並獲取最新版本,但若是因任何緣由(包括徹底脫機)而失敗,則會加載最新的緩存版本。若是您使用Expo構建獨立應用程序,那麼該獨立二進制文件還將附帶JavaScript的「預緩存」版本,以便它能夠在沒有互聯網的狀況下第一次冷啓動。 繼續閱讀以獲取有關獨立應用程序的更多信息。
獨立應用程序 (Standalone Apps)
您還能夠將您的expo應用打包爲獨立的二進制文件,以便提交至Apple iTunes Store或Google Play。在引擎蓋下(Under the hood,),它是expo客戶端的修改版本,僅用於加載單個URL(適用於您的應用),而且永遠不會顯示expo主屏幕或品牌。 有關更多信息,請參閱構建獨立應用程序。
升級Expo Upgrading Expo
在發佈新版expo時,不必定要更新您的應用程序。 Expo客戶端的新版本與向之前版本發佈的應用程序向後兼容。這意味着您能夠下載expo客戶端的新版本並打開之前版本發佈的應用程序,而且它們將完美工做。也就是說,每一個版本都比上一個更好,因此您可能但願保持最新狀態以利用新功能和性能改進。
升級指南取決於sdkVersion,所以請按照發行說明中的指南進行操做
咱們將發行說明發布到expo,例如v25.0.0發行說明。若是您要升級多個主要版本,咱們建議您按照當前版本和目標版本之間的每一個主要版本的升級指南。
若是您在本地項目中運行ExpoKit,升級須要額外的步驟。 ExpoKit目前是一個alpha功能,升級難度會因版本不一樣而有所不一樣,但這裏有一些信息。
歷史發行版本發行說明
下一張繼續介紹,這一篇主要介紹了:expo的工做原理,已經版本發行說明 歡迎你們關注個人微信公衆號,這篇文章是否被你們承認,個人衡量標準就是公
衆號粉絲增加人數。歡迎你們轉載,但必須保留本人博客連接!
我想文章翻譯到這裏,就告一段落,下面的翻譯將會進行一些小組件小知識點的組合,我本人也會作一些小demo來體驗expo的有點的,謝謝你們關注!