Expo文檔

利用代理排錯

MacOS代理配置(Sierra)

如果發(fā)生了錯誤,您可以在系統(tǒng)網(wǎng)絡(luò)設(shè)置中切到自動代理設(shè)置,使用自動代理配置 your-corporate-proxy-uri:port-number/proxy.pac

總覽

在企業(yè)wifi網(wǎng)絡(luò)中,為了在本地iOS模擬器中運(yùn)行項(xiàng)目,需要一個本地代理管理器。該本地代理應(yīng)用稱為Charles,也是我們的iOS開發(fā)團(tuán)隊(duì)正在使用的。http://charlesproxy.com/

如何設(shè)置見 https://docs.expo.io/versions/latest/introduction/troubleshooting-proxies.html

常見問題

使用Expo需要花費(fèi)多少錢?

免費(fèi)開源

Expo如何盈利?

目前不盈利。

Expo和React Native的區(qū)別?

Expo類似于React Native的Rails。它做了很多設(shè)置,以朝著正確的方向更快速的開始。有了Expo您不需要Xcode或者Android Studio。您可以使用任意的您覺得方便的文本編輯器來編寫javascript。您可以在Mac,Windows和Linux上運(yùn)行XDE(我們的桌面軟件)。

以下是Expo給你提供的創(chuàng)造性的服務(wù):

- 支持iOS和安卓

您可以在iOS和安卓中使用Expo中編寫的apps。您不需要走分開的流程。僅需要在iOs或安卓設(shè)備(或者您電腦上的模擬器)上的Expo客戶端打開Expo app即可。

- 推送提示信息

在iOS和安卓上推送提示信息使用的是一個簡單標(biāo)準(zhǔn)化的API。您不需要設(shè)置APNS和GCM/FCM或者配置ZeroPush或者其他。我們提供了目前為止盡可能最簡單的方式。

- Facebook登錄

這會花費(fèi)較長時(shí)間來登錄,但是您可以在Expo上花費(fèi)少于10分鐘的時(shí)間。

- 即時(shí)更新

所有的Expo apps可以實(shí)現(xiàn)秒更新,只需要在XDE上點(diǎn)擊Publish按鈕。您不需要任何設(shè)置。如果您沒有使用Expo,您可以使用Microsoft Code Push或者自行解決。

- 資源管理

圖片、視頻、字體等都是通過Expo在網(wǎng)絡(luò)上動態(tài)顯示的。意味著他們可以即時(shí)更新。Expo中的資源管理系統(tǒng)負(fù)責(zé)將您repo上的所有資源更新到一個CDN,因此他們可以快速加載。

沒有Expo,常規(guī)做法是將您的資源打包到app,但意味著您無法更新他們。或者您可以自己將資源放到CDN上。

- 方便更新React Native版本

我們每幾周就會更新Expo版本。您可以繼續(xù)使用React Native的老版本,或者更新到新版本。不需要擔(dān)心重建您的app二進(jìn)制文件。您可以更多時(shí)間考慮更新您的Javascript的問題。

如果要添加您自己的原生模塊,您必須使用ExpoKit。繼續(xù)閱讀下個問題以獲得更多解釋。

如何在我的Expo項(xiàng)目中添加定制化native code?

標(biāo)準(zhǔn)的Expo項(xiàng)目不支持定制化native code,包括需要自定義原生組件的第三方庫。在一個Expo項(xiàng)目中,您僅編寫純Js。Expo是故意這么設(shè)計(jì)的,我們認(rèn)為這種方式更好。

我們的SDK為您提供了大量的常用的高質(zhì)量的原生模塊。我們推薦盡可能的使用JS,因?yàn)樗芰⒓床渴鸬侥乃杏脩舨⑶以诳缙脚_中生效,并持續(xù)受益于Expo SDK的更新。特別是對于UI組件,JS總是更好的選擇。

如果您需要特別定制化例如on-the-fly視頻程序或者為了實(shí)現(xiàn)固件升級對Bluetooth radio的低端控制,我們也有提供支持https://docs.expo.io/versions/latest/guides/expokit.html

Expo和React一樣是為了實(shí)現(xiàn)web開發(fā)嗎?

Expo和React Native類似于React。編寫手機(jī)apps和網(wǎng)頁編程非常不一樣,您需要學(xué)習(xí)新的組件(例如View組件而不是div)。您需要更多的考慮視窗和各種導(dǎo)航,而不是分離的頁面,比起開發(fā)傳統(tǒng)的安卓或者ios app,您需要掌握更多的知識。

如何分享我的Expo項(xiàng)目?是否可用提交到app stores?

最快的分享Expo項(xiàng)目的方式是去發(fā)布它。您可以通過點(diǎn)擊XDE中的Publish或者在項(xiàng)目中運(yùn)行exp publish,它將會生成一個URL;您可以分享該URL給擁有Expo客戶端的任何人,他們可以立即打開您的app。

如果您準(zhǔn)備好了,您也可以創(chuàng)建一個單機(jī)app,提交到Apple或者Google的應(yīng)用商店。當(dāng)您運(yùn)行一行命令時(shí),Expo將為您構(gòu)建二進(jìn)制文件;參閱構(gòu)建單機(jī)Apps。Apple收費(fèi)99美元,Google一次性收費(fèi)25美元。

我可以在Expo中使用Relay嗎?

可以。更新您的.babelrc文件為:

將./pathToYourBabelRelayPlugin替換成您Relay插件的路徑。

為什么Expo使用了React Native的一個分支?

一個Expo SDK版本對應(yīng)一個React Native版本。例如,SDK 19對應(yīng)React Native 0.46.1。通常一個SDK版本和其對應(yīng)的React Native版本的分支并沒有區(qū)別,但我們有時(shí)會發(fā)現(xiàn)當(dāng)我們放了沒有merged到版本上的代碼會出問題,我們會將代碼放到我們的分支上。使用一個分支可以方便大家核實(shí)我們使用的是正確的React Native版本。如果您的SDK版本是19.0.0,那么您應(yīng)使用https://github.com/expo/react-native/archive/sdk-19.0.0.tar.gz。

如何把現(xiàn)有的React Native項(xiàng)目放在Expo中運(yùn)行?

最簡單方式就是使用XDE或者exp命令創(chuàng)建一個新項(xiàng)目,然后將您現(xiàn)有項(xiàng)目中的所有JavaScript代碼復(fù)制,然后使用yarn add添加依賴。

如果您有相似的通過Expo SDK暴露的原生模塊依賴,這將花費(fèi)更多時(shí)間(不包括npm install的時(shí)間)。如果遇到問題可以隨時(shí)向我們提問。

如果您使用的原生庫Expo不支持,您將需要使用相似的Expo API重寫您的應(yīng)用,否則您將無法使您的app所有部分都生效。

過去我們維護(hù)過一個工具exp convert,它目前不再使用和維護(hù)因此以上方法是最好的將現(xiàn)有React Native項(xiàng)目引入Expo的方法。

如何移除已發(fā)布的Expo項(xiàng)目?

Expo的默認(rèn)隱私設(shè)置是unlisted,因此沒有人可以找到您的app除非您將鏈接分享給了他們。

如果您確實(shí)需要將發(fā)布的app設(shè)置為未發(fā)布,最好的辦法就是在Slack上給我們留言,我們可以幫您做這件事。如果沒人幫您,您可以在app上放一個空的View標(biāo)簽。

Exponent是什么? 它和Expo有什么不同?

Exponent是Expo項(xiàng)目最初的名稱。您可能會偶爾在博客或者代碼或者文檔中看到。他們是同一個東西。我們只是簡化了名稱。

Expo apps支持什么Android和iOS版本?

Android 4.4+ 和 iOS 9+。

可以使用Node.js包嗎?

如果是基于Node standard library APIs,您將無法使用Expo。Node standard library廣泛使用C++,它暴露給javascript的方法并不屬于javascript語言規(guī)范,例如讀寫filesystem的能力。

。。。。。。

在手機(jī)或模擬器中打開app

打開您手機(jī)上的信息,將其中的鏈接在expo中打開。您可以將這條鏈接分享給任何安裝了expo的人, 但僅在該項(xiàng)目在XDE中打開時(shí)才有效。

要在IOS模擬器中打開app您需要按下Device按鈕,選擇Open on iOS Simulator(僅macOS)。要在安卓模擬器中打開,需要先啟動它,再按下Device和Open On Android。

第一次修改

在新項(xiàng)目中打開screens/HomeScreen.js,在render()中修改文本,您會看到app重載了您的修改。

無法看到變更?

Live reload是默認(rèn)啟用的,但為了確保我們不出錯,應(yīng)在步驟中確保啟用了live reload。

-確保XDE中的開發(fā)模式啟用。

-關(guān)閉app并重啟。

-一旦app重啟,搖晃您的設(shè)備以顯示開發(fā)菜單。如果您使用的是模擬器,如果是ios按下?+d,如果是安卓按下ctrl+m。

-如果看到Enable Live Reload,點(diǎn)擊它之后您的app將重載。如果是Disable Live Reload,則退出開發(fā)菜單并嘗試再次做修改。

Configuration with app.json

如需要配置app,您需要找到app.json文件。該文件不屬于代碼。它存在項(xiàng)目的根目錄下package.json文件的旁邊。它的內(nèi)容如下:

{

"expo": {

"name": "My app",

"slug": "my-app",

"sdkVersion": "21.0.0",

"privacy": "public"

}

}

App.json文件過去是exp.json,但是為了與Create React Native App保持一致它被合并為一個文件。如果您需要將您的exp.json轉(zhuǎn)為app.json,僅需要在app.json文件中增加一個“expo”鍵值,作為所有其他所有鍵值的父級。

大部分的app.json配置都能通過Expo.Constants.manifest的js代碼訪問到。敏感信息比如密鑰已被移除。參看下面的其他值,了解如何傳遞任意配置數(shù)據(jù)到您的app。

以下屬性可以在app.json的“expo”鍵值下找到:

https://docs.expo.io/versions/latest/guides/configuration.html


開發(fā)模式

React Native包含一些非常有用的工具:Chrome的遠(yuǎn)程js調(diào)試,live reload,hot reloading,還有一個類似下面的檢測器的element檢測器。當(dāng)您的app正在運(yùn)行它還能執(zhí)行一系列校驗(yàn)并給您提示。例如,如果您使用了一個被廢棄的屬性或者您忘了給組件傳遞一個必填的屬性。

但是這是有成本的:您的app在開發(fā)模式下會運(yùn)行緩慢。您可以在XDE中打開或關(guān)閉它。當(dāng)切換時(shí),只需要關(guān)閉或重新打開就會生效。任何時(shí)候您需要測試app的性能,請確保關(guān)閉了開發(fā)模式。

打開和關(guān)閉開發(fā)模式:

exp命令行

如果您傾向于使用命令行或者為了試驗(yàn)使用Expo或者持續(xù)集成(CI),除了XDE我們還有CLI exp。

安裝

運(yùn)行npm install -g exp來全局下載exp。

如果您之前未使用過exp或者XDE,第一件要做的就是使用exp login命令登錄Expo賬號。

命令

查看命令:exp --help

使用--help查看某條命令的額外信息。例如exp start --help,輸出:

https://docs.expo.io/versions/latest/guides/exp-cli.html

您還可以在android, ios或者start命令中使用--offline運(yùn)行離線模式。

日志查看

調(diào)試

使用模擬器

無法測試實(shí)際機(jī)器的性能和觸摸功能,但是作為調(diào)試使用您會覺得更為方便。Apple將它們的模擬器稱為“Simulator”,Google稱為“Emulator”。

iOS

確保您有最新的Xcode。它包含iOS模擬器和其他一些工具。

Android

相比較標(biāo)準(zhǔn)模擬器,Android我們推薦Genymotion模擬器。我們發(fā)現(xiàn)它的功能更完善、更快速并且使用更方便。

Genymotion安裝指南:https://docs.genymotion.com/Content/01_Get_Started/Installation.htm

一旦您下載了Genymotion,創(chuàng)建一個虛擬設(shè)備,我們推薦Nexus5,版本隨意。

開發(fā)菜單

該菜單提供了幾種功能利于調(diào)試。它也被稱為調(diào)試菜單。您可以在運(yùn)行了您的應(yīng)用的設(shè)備上調(diào)用它。

在iOS設(shè)備上

輕微搖晃設(shè)備

在iOS模擬器上

在Mac上按下Ctrol-Cmd-Z來模擬搖晃手勢,或者按下Cmd+D。

在Genymotion上

在工具欄上按下“Menu”按鈕,或者按下Cmd-m。

調(diào)試javascript

您可以通過Chrome的調(diào)試工具來調(diào)試Expo apps。您app中的javascript代碼會 運(yùn)行在chrome的weworker中,而不是您的手機(jī)上。您可以設(shè)置斷點(diǎn),檢查變量,執(zhí)行代碼等等。

為了最好的調(diào)試體驗(yàn),您首先要在XDE中更改host為LAN或者localhost。如果您使用了Tunnel并啟用了調(diào)試功能,您可能會遇到延遲導(dǎo)致app無法使用。請確保開發(fā)模式被勾選。

如果您使用的是LAN,請確保您的設(shè)備和開發(fā)機(jī)在同一個wifi網(wǎng)絡(luò)。在一些公共網(wǎng)絡(luò)中可能不起作用。localhost無法在ios使用,除非在模擬器中。安卓上只有設(shè)備和電腦通過usb連接上才起作用。

在設(shè)備上打開app。顯示開發(fā)菜單,然后選擇Debug JS Remotely。這將在Chrome tab中打開URL http://localhost:19001/debugger-ui。這個時(shí)候您可以設(shè)置斷點(diǎn)并且使用javascript console。完成之后搖晃您的設(shè)備,停止Chrome 調(diào)試。

使用Chrome調(diào)試時(shí)console.log語句的行數(shù)是不會默認(rèn)有用的。為了獲得正確的行數(shù),打開Chrome dev Tools設(shè)置,選擇“Blackboxing”選項(xiàng),確?!癇lackbox content scripts”被選中,然后在“Blackbox”選中時(shí)添加expo/src/Logs.js。

localhost調(diào)試

當(dāng)您在XDE中打開一個項(xiàng)目,按下Open on Android,只要您的設(shè)備是接通的或者模擬器是正在運(yùn)行的,XDE會自動讓您的設(shè)備向開發(fā)機(jī)轉(zhuǎn)發(fā)localhost: 19000和19001。如果您正在使用localhost做調(diào)試而且沒起作用,關(guān)閉app然后再Open on Android打開?;蛘呷绻螺d了安卓開發(fā)工具您可以使用以下命令手動轉(zhuǎn)發(fā)端口號:adb reverse tcp:19000 tcp:19000-adb reverse tcp:19001 tcp:19001。

Source maps and async functions

Source maps 和 async functions并不是100%依賴。React Native并不是每次都在chrome的source mapping運(yùn)行良好。如果您想要確保在正確的位置打斷點(diǎn),您應(yīng)在代碼中直接使用debugger。

HTTP調(diào)試

要調(diào)試HTTP請求您需要使用代理。您可以選擇以下代理:

Charles Proxy

mitmproxy

Fiddler

安卓上,代理設(shè)置app便于在調(diào)試和非調(diào)試模式下切換。不幸的是它在Android M上還無法使用。

在Chrome DevTools中獲取網(wǎng)絡(luò)請求是未來要做的工作:https://github.com/facebook/react-native/issues/934

Hot Reloading 和 Live Reloading

Hot Module Reloading是不在屏幕或?qū)Ш綍r(shí)失去狀態(tài)的最快重載更新的方式。您可以在開發(fā)菜單中啟用它。Live Reload會重新加載整個JS context,Hot Module Reloading會確保調(diào)試周期更快速。兩種方式是不能同時(shí)打開的。

其他調(diào)試技巧

Dotan Nahum 在他的文章“Debugging React Native Applications”(https://medium.com/reactnativeacademy/debugging-react-native-applications-6bff3f28c375)中列出了其他有用的工具,例如spying on bridge messages and JSEventLoopWatchdog。

Genymotion模擬器

構(gòu)建單機(jī)Apps

發(fā)布

連接

接合ExpoKit

使用ExpoKit開發(fā)

ExpoKit進(jìn)階

Expo & "Create React Native App"

Expo如何工作

升級Expo

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

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

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