很抱歉最近實在太忙了,以至於一直沒辦法把前文好好寫完,現在先為大家預覽一下 Day3 的內容!
q
第一篇指南的首要目標是盡快地建立並執行第一個 Exponent 應用程式。
在這個階段,我們應該要有一個已經安裝好 XDE 的環境,以及一組安裝有 Exponent 客戶端 app 的 iOS / Android 實體機或是虛擬機 / 模擬器。
初次執行 XDE 之後,你會看到一個詢問使用者名稱及密碼的提示。不要猶疑,請填上任何你想要的使用者名稱/密碼,然後按下繼續 — 如果該使用者名稱沒有重複,我們會自動為你建立該帳號。
按下 Project
並且選擇 New Project
,然後選擇 Tab Navigation 選項 — 這個樣板帶給我們一個好的開始 — 然後輸入你想要的專案名稱,以我來說,這將會是 my-new-project
。
接下來,決定你的專案要存在哪裡。我個人會把所有我的酷玩意兒通通放在 /coding
,所以我選擇該路徑,並且按下打開。
XDE 現在會在你所選取的目錄初始化一個新專案,包含:一份複製過來的基本樣板,以及安裝 react
,react-native
與 exponent
。
當專案初始化準備好之後,你會看到 XDE 的 Logs 視窗出現 React packager ready.
字句。這個 React packager
是一個簡單 HTTP Server,它使用 Babel <https://babeljs.io/>
_ 替你編譯 app 所需要的 Javascript 程式碼,並且提供給你的 Exponent app 使用。
**NOTE**:如果你是 MacOS 的使用者,而且你的 XDE 卡在 “Waiting for packager and tunnel to start”,那你可能需要安裝 [install watchman on your machine] (https://facebook.github.io/watchman/docs/install.html#build-install)。最簡單的安裝方式是透過 `[Homebrew](http://brew.sh/)`,執行這段指令:``brew install watchman``。
**NOTE2**:如果你先前就已經裝過 watchman < 4.6.0,那請使用這段指令更新:``brew uninstall watchman; brew install watchman``。
你會在 XDE 上看到類似 exp://jv-8wr.iamcxa.my-new-project.exp.direct:80
般的網址,請把 exp
換成 http
後直接使用瀏覽器開啟它。
你將會看到一些 JSON 格式的內容。這個 JSON 就是 Exponent Manifest,它讓我們可以透過開啟 Exponent app 並且在 address bar 貼上該網址來開啟自己的 app。
或是試試另外一個很狂的方式:點選 Send Link
,輸入你的手機號碼(包含國碼如 +886912345678)或 Email,然後再次按下 Send Link
。
隨後點擊收到的簡訊中的連結,你的 app 就會透過 Exponent app 開啟。你可以分享這個連結給任何已經安裝 Exponent app 的朋友使用 — 但要注意的是,它將只在你的 XDE 正在執行中且有開啟對應專案時有效。
要在 iOS 模擬器中開啟 app,你可以點擊 Device 按鈕,然後選取 Open on iOS Simulator
(macOS 限定)。要在 Android 模擬器中開啟 app,你需要先啟動模擬器,再按下 Open on Android
。
在你的專案中開啟 screens/HomeScreen.js
,然後修改 render()
函式中的任何文字字串。你應該會在你的 app 重新載入後看到你所做的變更。
預設 Live reload
就是啟用的,但我們還是來看一次如何啟用的步驟吧!有時候事情就是不會隨著你所希望的那樣運作。
首先,確保 XDE 的 development-mode
已經啟用。
關閉 app 然後重新開啟。
當 app ㄧ經重啟,搖動你的裝置以開啟 Developer Menu
。如果你用的是模擬器,iOS 請按下 ⌘+d
、Android 請按 Ctrl+M
。
如果你看到 Enable Live Reload
,你的 app 會在你按下它後隨即重啟。如果,你看到的是 Disable Live Reload
,那麼請離開 Developer Menu 然後試著做出其他變更。
終於,你已經完成建立一個新的 Exponent 專案,同時做出程式碼變動、而且看見你的 app 動態更新。恭喜你!